elementui中使用el-tabs切换实时更新数据代码示例

本篇文章小编给大家分享一下elementui中使用el-tabs切换实时更新数据代码示例，文章代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

使用el-tabs切换实时更新数据

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

想要实现切换 tab 能实时更新数据的要求

   
     
   
   
     
   
   
     数据授权
   
 

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 后，将其重新激活，并重新请求后端数据

el-tabs切换确认

实现效果

相关知识

el-tabs具有属性before-leave

解决代码

解释

:before-leave是属性，需要绑定一个值。这个值是通过leaveTab传递的