本文檔記錄element-ui升級導致的問題

前端開發(fā)過程中，項目有時不得不升級element-ui，本以為升級很簡單，然而發(fā)現(xiàn)升級后會存在一些問題
1.element-ui 從4.2版本左右升級到7.11版本導致el-tabs標簽頁組件響應式的數(shù)據(jù)，不再響應
有時我們需要在el-tab標簽上自己加上樣式，用到slot，在slot上綁定data中寫入的數(shù)據(jù)，數(shù)據(jù)更新時，視圖卻不更新。代碼類似下面的

// template中寫的代碼
<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="定時任務補償" name="forth">定時任務補償</el-tab-pane>
</el-tabs>
// script中寫的代碼
export default{
....// 上面省略，只寫data
data() {
return {
  activeName: "first",
    count: 0
}
}
}

業(yè)務邏輯就是，點擊當前tab時，不顯示當前tab對應的數(shù)值，點擊其他tab并且count>0 時才會顯示對應的數(shù)值。
但是切換tab時，count會根據(jù)接口返回值變化，當count>0時，該數(shù)值并不會顯示，使用vue-develop-tool工具看到data中綁定的值，確實變化了。視圖卻沒有響應
解決思路

<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="定時任務補償" name="forth">定時任務補償</el-tab-pane>
</el-tabs>

data中加入isShowTabCount變量，默認false當請求接口后，用

this.$next(()=>{
    this.isShowTabCount = true
})

切換tab時，在click方法中先設(shè)置this.isShowTabCount = false，count獲取之后，寫入上面的代碼，強行刷dom，這樣就可以解決數(shù)據(jù)不實時響應的問題