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

灰太狼 2022-11-10 03:47 241阅读 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 条评论，241人围观）

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

相关阅读

相关实时数据更新与Apollo：探索GraphQL订阅

前言 ![在这里插入图片描述][0422b4369a3549b3a39da19588ab88f4.png] 「作者主页」：[雪碧有白泡泡][Link 1] 「个人

古城微笑少年丶/ 2024年03月27日 19:09/ 0 赞/ 77 阅读

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

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

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

相关 Spring Boot 注解大全（实时更新中）

文章目录 @ComponentScan @PropertySource 与 @PropertySources @Import 与

浅浅的花香味﹌/ 2023年01月10日 01:27/ 0 赞/ 156 阅读

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

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

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

相关 QT 实时数据更新UI

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

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

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

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

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

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

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

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

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

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

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

相关 elementUi 样式无法更新

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

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

相关 elementui 中tab切换

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

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