美文网首页
element-ui el-tabs响应式数据不起作用

element-ui el-tabs响应式数据不起作用

作者: 柠檬家的芒果果 | 来源:发表于2019-07-31 15:26 被阅读0次

    本文档记录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,这样就可以解决数据不实时响应的问题

    相关文章

      网友评论

          本文标题:element-ui el-tabs响应式数据不起作用

          本文链接:https://www.haomeiwen.com/subject/gcqtdctx.html