elementui中如何使用el-tabs切換實時更新數據

這篇文章主要講解了“elementui中如何使用el-tabs切換實時更新數據”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“elementui中如何使用el-tabs切換實時更新數據”吧！

使用el-tabs切換實時更新數據

項目中使用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 后，將其重新激活，并重新請求后端數據 

el-tabs切換確認

實現效果

相關知識

el-tabs具有屬性before-leave

解決代碼

<template>
    <el-tabs v-model="activeName" :before-leave="leaveTab">
		<el-tab-pane label="用戶管理" name="first">用戶管理</el-tab-pane>
    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
    <el-tab-pane label="定時任務補償" name="fourth">定時任務補償</el-tab-pane>
    </el-tabs>
</template>

<script>
data(){
    return{
        activeName:"first"
    }
}
methods:{
    leaveTab(){
        let a = confirm('有未保存的更改, 確認離開?')
      if (a) {
        console.log('確認')
        return true
      } else {
        console.log('取消')
        return false
      }
    }
}
</script>

解釋

:before-leave是屬性，需要綁定一個值。這個值是通過leaveTab傳遞的

感謝各位的閱讀，以上就是“elementui中如何使用el-tabs切換實時更新數據”的內容了，經過本文的學習后，相信大家對elementui中如何使用el-tabs切換實時更新數據這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！