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

最新推荐文章于 2025-03-20 22:11:09 发布

前端开心果

最新推荐文章于 2025-03-20 22:11:09 发布

阅读量1w

点赞数 4

分类专栏： vue 文章标签： el-tabs elementui

本文链接：https://blog.csdn.net/qq_38157825/article/details/114869811

版权

vue 专栏收录该内容

117 篇文章

订阅专栏

本文介绍如何使用Vue.js中的el-tabs组件实现切换tab时动态加载数据的功能，通过v-if进行选择性渲染，确保每次切换都能获取最新的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目中使用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
        }
      }
    },
  }
}