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

Question

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...

Answer 1

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

Answer 2

因为你每个子表格都是使用resourceC

 <el-table :data="resourceC">...</el-table>

改成 （父组件）

<el-table :data="resource"  @expand="hangClick" style="width: 100%;">
   <el-table-column type="expand" prop="children">
      <template scope="scope">
         <v-child-table :scope="scope"></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>

子组件 v-child-table.vue

<template>
    <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>
<script>
//scope 是父组件传递过来的
 export default  {
     props: {
            scope: Object // $index/row/store  你可以看scope 这个对象，这个页面有很多简化的 
     },
     mounted() {
         //scope.row 可以获取这个row的信息比如id什么的,
         //异步获取数据 赋值给 resourceC 即可
     }
 }
</script>

Answer 3

刚刚根据楼主的提示，找到答案了。以下是我的解决方案。感谢楼主。

<el-table-column type="expand" prop="children">
                <template scope="scope">
                    <el-table stripe v-loading="route_tab_loading" :data="scope.row.children" style="width: 100%; margin-top: -18px; margin-left: 8px;">
                        <el-table-column prop="id" label="ID" v-if="false">
                        </el-table-column>
                        <el-table-column prop="envName" label="环境名" width="170">
                        </el-table-column>
                        <el-table-column prop="routeKey" label="路由键" width="150">
                        </el-table-column>
                        <el-table-column prop="expireTimeStr" label="过期时间" width="200">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template scope="scope">
                                <el-button size="small" @click="handleShowEnv(scope.$index, scope.row)">查看</el-button>
                                <el-button size="small" @click="handleEditEnv(scope.$index, scope.row)">编辑</el-button>
                                <el-button size="small" type="danger" @click="handleDeleteEnv(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </el-table-column>

赋值：
handleExpandChange(row, isExpanded) {
    row.children = 数据源;
}

Answer 4

您好，能否帮我一下，我也遇到和您一样的问题，谢谢！QQ：1525770456