elementui中el-tabs切换实时更新数据

灰太狼 2022-11-10 03:47 237阅读 0赞

项目中使用`el-tabs` 发现会一次性把所有 `tab` 里的请求读完，之后进行 tab 切换，不再重新读取请求  
想要实现切换 `tab` 能实时更新数据的要求

<el-tabs type="border-card" class="root" v-model="activeName" @tab-click="handleTabClick">
       <el-tab-pane label="menu" name="menu">
         <menu-perm :menus="menus" v-if="tabRefresh.menu" />
       </el-tab-pane>
       <el-tab-pane label="perm" name="perm">
         <api-perm :permissions="permissions" v-if="tabRefresh.perm" />
       </el-tab-pane>
       <el-tab-pane label="data" name="data">
         <span v-if="tabRefresh.data">数据授权</span>
       </el-tab-pane>
     </el-tabs>

js 部分

export default { 
      data () { 
        return { 
          activeName: 'menu',
          tabRefresh: { 
            menu: true,
            perm: false,
            data: false
          }
        }
      },
      methods: { 
        handleTabClick (tab) { 
          this.activeName = tab.name
          switch (this.activeName) { 
            case 'menu':
              this.switchTab('menu')
              break
            case 'perm':
              this.switchTab('perm')
              break
            case 'data':
              this.switchTab('data')
              break
          }
        },
        switchTab (tab) { 
          for (let key in this.tabRefresh) { 
            if (key === tab) { 
              this.tabRefresh[key] = true
            } else { 
              this.tabRefresh[key] = false
            }
          }
        },
      }
    }

通过 `v-if` 进行选择性渲染，切换 `tab` 后，将其重新激活，并重新请求后端数据

发表评论取消回复

表情：

评论列表（有 0 条评论，237人围观）

还没有评论，来说两句吧...

相关阅读

相关 mybatis缓存与数据实时更新

> > > 为了提高项目的性能，减轻服务器压力，我们需要在项目中开启了二级缓存，但如果没有作其他处理，会导致经常读到脏数据。对于我们这样的项目，要求每次读到的都要是最新

太过爱你忘了你带给我的痛/ 2024年02月17日 22:54/ 0 赞/ 41 阅读

相关 Android初学者指南：实时更新RecyclerView数据

Android初学者指南：实时更新RecyclerView数据在本文中，我们将探讨如何使用RecyclerView实现实时数据动态更新的功能。RecyclerView是一个

以你之姓@/ 2023年10月14日 22:47/ 0 赞/ 124 阅读

相关 elementui树表修改子节点不能实时更新的解决办法

在使用ElementUI提供的树表（el-table）的时候发现，如果手动通过JS修改了某个节点的children中的一条记录（子节点）的话，并不会自动刷新。简单分析了一下

快来打我*/ 2023年06月04日 04:49/ 0 赞/ 2 阅读

相关 java数据实时更新_Java连载137更新数据和删除数据

一、数据更新语句的命令格式如下： UPDATE SET column_name = 'xxx' WHERE 在更新数据的时候既可以使用Statemen

一时失言乱红尘/ 2023年01月01日 09:58/ 0 赞/ 134 阅读

相关 QT 实时数据更新UI

main.cpp include "mainwindow.h" include <QApplication> int main(int ar

水深无声/ 2022年12月20日 01:54/ 0 赞/ 240 阅读

相关 vue Websocket 实时自动更新数据

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

今天药忘吃喽~/ 2022年11月29日 05:37/ 0 赞/ 159 阅读

相关 elementui中el-tabs切换实时更新数据

项目中使用`el-tabs` 发现会一次性把所有 `tab` 里的请求读完，之后进行 tab 切换，不再重新读取请求想要实现切换 `tab` 能实时更新数据的要求

灰太狼/ 2022年11月10日 03:47/ 0 赞/ 238 阅读

相关【clickhouse系列】如何做到数据实时更新

UPDATE+Optimize方式用法建表及插入数据 CREATE TABLE tb_test( ts DateTime,

悠悠/ 2022年10月07日 12:52/ 0 赞/ 230 阅读

相关 elementUi 样式无法更新

elementUI 样式无非更新在vue-cli里编写开发背景在操作过程中，会发现elementUI内置的样式无法满足需求，但是无论怎么加样式，

妖狐艹你老母/ 2022年10月02日 13:56/ 0 赞/ 178 阅读

相关 elementui 中tab切换

<el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane lab

不念不忘少年蓝@/ 2022年09月16日 14:15/ 0 赞/ 156 阅读