本文档记录element-ui升级导致的问题
前端开发过程中，项目有时不得不升级element-ui，本以为升级很简单，然而发现升级后会存在一些问题
1.element-ui 从4.2版本左右升级到7.11版本导致el-tabs标签页组件响应式的数据，不再响应
有时我们需要在el-tab标签上自己加上样式，用到slot，在slot上绑定data中写入的数据，数据更新时，视图却不更新。代码类似下面的
// 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
}
}
}
业务逻辑就是，点击当前tab时，不显示当前tab对应的数值，点击其他tab并且count>0 时才会显示对应的数值。
但是切换tab时，count会根据接口返回值变化，当count>0时，该数值并不会显示，使用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方法中先设置this.isShowTabCount = false，count获取之后，写入上面的代码，强行刷dom，这样就可以解决数据不实时响应的问题
