vue.js - vue elementui表格中，点击展开每一行，所有子table的数据变成一样

问题描述

问 题

HTML部分代码：

<el-table :data="resource"  @expand="hangClick" style="width: 100%;">
   <el-table-column type="expand" prop="children">
      <template scope="scope">
         <el-table :data="resourceC">
             <el-table-column prop="code" label="编号" min-width="100"></el-table-column>
             <el-table-column prop="name" label="名称" min-width="200"></el-table-column>
             <el-table-column prop="type" label="类型"  min-width="100"></el-table-column>
             <el-table-column prop="status" label="状态" min-width="100"></el-table-column>          
          </el-table>
       </template>
    </el-table-column>
    <el-table-column prop="code" label="编号" min-width="100"></el-table-column>
    <el-table-column prop="name" label="名称" min-width="200"></el-table-column>
    <el-table-column prop="type" label="类型" min-width="100></el-table-column>
    <el-table-column prop="status" label="状态" min-width="100"></el-table-column>
  </el-table>

js部分代码：

   data(){
        return {
            resource ：[],
            resourceC ：[]
        }
   },
   methods：{
    resListC(dat,event){
          let resdatas = {"rows": 1000, "parentId": dat};
          getresListC(resdatas).then((res) => {
              this.resource = res.data.rows;
          })
      },
    hangClick:function(row){
          let resdatas = {"rows": 1000, "parentId": row.id};
          getresListC(resdatas).then((res) => {
              this.$set(row,"children",res.data.rows);
              this.resourceC = row.children;
          })
    }
   }

点击展开，从后台获取数据，我把获取到的数据插入到每一行的数据children中，此时所有子table都发生改变且数据相同，有没有什么方法使其对应起来？

可以看一下例子https://jsfiddle.net/hecy_wh1...

解决方案

https://jsfiddle.net/forheyin... 这样做可以，自己改改样式。。。

这篇关于vue.js - vue elementui表格中，点击展开每一行，所有子table的数据变成一样的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！