element中el-table,type=‘expand‘展开行,通过@expand-change=‘ ‘事件渲染子table的数据,页面数据未同步

1 篇文章 0 订阅

需求:
一个table中嵌套另一个table,在点击外层table的‘>’时,获取嵌套table的数据,最终效果图:
在这里插入图片描述
遇到的问题:
table里面嵌套另一个table的方法,就是在行属性设置了type=‘expand’,也在table里面添加了@expand-change="showManageDetail"事件监听展开行事件,在监听事件里面动态获取数据赋值给里面展开的table,这里出现了,数据已经获取到,但是无法精准的同步到页面渲染,(第一次点击没有数据,第二次点击才会有数据)。
产生问题的根本原因:
vue数据的变化监听本质,是数据初始化的时候,为要监听的数据属性添加了相应的set和get方法,监听数据的变化,在上面这个问题中,你将新请求到的数据添加到原有数组时,新的属性在初始化时并没有被监听到,这就产生了数据和页面渲染不同步的问题。
解决方法:
1.获取外层table的数据时,给该table数组数据添加一个children的属性,值类型为数组,初始化为空。

 responesData.map(item => {
     item.managerDetail = []
 })
 that.tableData=responesData

2.通过expand-change来触发showManageDetail方法,获取当前id对应的子table的数据,把获取到的数据,添加到外层table数据中,这样就拿到了整个table的最终数据。

 that.tableData.forEach((temp, index) => {
   // 找到当前点击的行,把动态获取到的数据赋值进去
   if (temp.user_id == row.user_id) {
      that.tableData[index].managerDetail = respones.data;
   }}
)

3.渲染页面

<el-table-column type="expand" v-if="activeIndex==3">
   <template slot-scope="scope">
      <div v-if="scope.row.managerDetail.length>0">
        <el-table :data="scope.row.managerDetail" stripe style='width:100%' :cell-style="typeDiscoutStyle">
           <el-table-column v-for="item in manageUserCol" :key="item.prop" :prop="item.prop" :label="item.label" :width="item.width" :formatter="item.formatter"></el-table-column>
       </el-table>
     </div>
     <div class="expand-noItems" v-else>该客户经理名下暂无注册用户</div>
   </template>
</el-table-column>

至此 ,问题解决了

  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值