本文檔記錄element-ui升級(jí)導(dǎo)致的問(wèn)題
前端開(kāi)發(fā)過(guò)程中题禀，項(xiàng)目有時(shí)不得不升級(jí)element-ui鞋诗，本以為升級(jí)很簡(jiǎn)單，然而發(fā)現(xiàn)升級(jí)后會(huì)存在一些問(wèn)題
1.element-ui 從4.2版本左右升級(jí)到7.11版本導(dǎo)致el-tabs標(biāo)簽頁(yè)組件響應(yīng)式的數(shù)據(jù)迈嘹，不再響應(yīng)
有時(shí)我們需要在el-tab標(biāo)簽上自己加上樣式削彬，用到slot，在slot上綁定data中寫(xiě)入的數(shù)據(jù)秀仲，數(shù)據(jù)更新時(shí)吃警，視圖卻不更新。代碼類(lèi)似下面的
// template中寫(xiě)的代碼
<el-tabs type="border-card" v-model="activeName">
<el-tab-pane name="first">
<span slot="label"><i class="el-icon-date"></i>
<span v-show="activeName!=first && count > 0" >{{count}}</span>
</span>
我的行程
</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="forth">定時(shí)任務(wù)補(bǔ)償</el-tab-pane>
</el-tabs>
// script中寫(xiě)的代碼
export default{
....// 上面省略啄育，只寫(xiě)data
data() {
return {
activeName: "first",
count: 0
}
}
}
業(yè)務(wù)邏輯就是，點(diǎn)擊當(dāng)前tab時(shí)拌消，不顯示當(dāng)前tab對(duì)應(yīng)的數(shù)值挑豌，點(diǎn)擊其他tab并且count>0 時(shí)才會(huì)顯示對(duì)應(yīng)的數(shù)值。
但是切換tab時(shí)墩崩，count會(huì)根據(jù)接口返回值變化氓英，當(dāng)count>0時(shí)，該數(shù)值并不會(huì)顯示鹦筹，使用vue-develop-tool工具看到data中綁定的值铝阐，確實(shí)變化了。視圖卻沒(méi)有響應(yīng)
解決思路
<el-tabs type="border-card" v-model="activeName">
<!--注意這里的變化铐拐，加入了v-if-->
<el-tab-pane name="first" v-if="isShowTabCount">
<span slot="label"><i class="el-icon-date"></i>
<span v-show="activeName!=first && count > 0" >{{count}}</span>
</span>
我的行程
</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="forth">定時(shí)任務(wù)補(bǔ)償</el-tab-pane>
</el-tabs>
data中加入isShowTabCount變量徘键，默認(rèn)false當(dāng)請(qǐng)求接口后，用
this.$next(()=>{
this.isShowTabCount = true
})
切換tab時(shí)遍蟋，在click方法中先設(shè)置this.isShowTabCount = false吹害，count獲取之后，寫(xiě)入上面的代碼虚青，強(qiáng)行刷dom它呀，這樣就可以解決數(shù)據(jù)不實(shí)時(shí)響應(yīng)的問(wèn)題
