快捷導(dǎo)航

elementui中使用el-tabs切換實(shí)時(shí)更新數(shù)據(jù)

更新時(shí)間：2022年08月02日 11:46:12 作者：風(fēng)如也

這篇文章主要介紹了elementui中使用el-tabs切換實(shí)時(shí)更新數(shù)據(jù)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

使用el-tabs切換實(shí)時(shí)更新數(shù)據(jù)

項(xiàng)目中使用el-tabs 發(fā)現(xiàn)會(huì)一次性把所有 tab 里的請求讀完，之后進(jìn)行 tab 切換，不再重新讀取請求

想要實(shí)現(xiàn)切換 tab 能實(shí)時(shí)更新數(shù)據(jù)的要求

<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">數(shù)據(jù)授權(quán)</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 進(jìn)行選擇性渲染，切換 tab 后，將其重新激活，并重新請求后端數(shù)據(jù)

el-tabs切換確認(rèn)

實(shí)現(xiàn)效果

解決代碼

<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="定時(shí)任務(wù)補(bǔ)償" name="fourth">定時(shí)任務(wù)補(bǔ)償</el-tab-pane>
    </el-tabs>
</template>

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