您现在的位置是：网站首页> 编程资料编程资料

elementui中使用el-tabs切换实时更新数据_vue.js_

2023-05-24 322人已围观

简介 elementui中使用el-tabs切换实时更新数据_vue.js_

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