elementui中使用el-tabs切換實時更新數(shù)據(jù)
更新時間：2022年08月02日 11:46:12 作者：風(fēng)如也
這篇文章主要介紹了elementui中使用el-tabs切換實時更新數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
使用el-tabs切換實時更新數(shù)據(jù)
項目中使用el-tabs 發(fā)現(xiàn)會一次性把所有 tab 里的請求讀完，之后進行 tab 切換，不再重新讀取請求
想要實現(xiàn)切換 tab 能實時更新數(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 進行選擇性渲染，切換 tab 后，將其重新激活，并重新請求后端數(shù)據(jù)
el-tabs切換確認(rèn)
實現(xiàn)效果
相關(guān)知識
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="定時任務(wù)補償" name="fourth">定時任務(wù)補償</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>
解釋
:before-leave是屬性，需要綁定一個值。這個值是通過leaveTab傳遞的
這個問題很簡單……但是困擾了有幾天……要多看看 官方文檔?。。。?/strong>
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue項目配置sass及引入外部scss文件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
關(guān)于vue中路由的跳轉(zhuǎn)和參數(shù)傳遞,參數(shù)獲取
這篇文章主要介紹了關(guān)于vue中路由的跳轉(zhuǎn)和參數(shù)傳遞，參數(shù)獲取方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)Input輸入框模糊查詢方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
vue鼠標(biāo)移入添加class樣式,鼠標(biāo)移出去除樣式(active)實現(xiàn)方法
今天小編就為大家分享一篇vue鼠標(biāo)移入添加class樣式,鼠標(biāo)移出去除樣式(active)實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了Vue項目中使用Vux的安裝過程,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-05-05
在vue項目中使用動畫其實有多種方式，可以使用vue中的過渡transition，可以使用animate動畫與transition配合使用，也可以單獨使用animate動畫庫，下面我們開始介紹在vue中單獨使用animate動畫，感興趣的朋友一起看看吧2018-08-08
本篇文章主要介紹了詳解Vue 動態(tài)添加模板的幾種方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要介紹了Vue實現(xiàn)星級評價效果的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
這篇文章主要介紹了vue腳手架項目創(chuàng)建步驟詳解，文章講解的很清晰，初學(xué)者可以跟著步驟學(xué)習(xí)下2021-03-03
vue項目創(chuàng)建并引入餓了么elementUI組件的步驟
這篇文章主要介紹了vue項目創(chuàng)建并引入餓了么elementUI組件的步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04