elementui表格父子表_elementUI中Table表格问题的解决方法

ElementUI中的Table表格支持父子表格的展示，可以通过设置`expand-row-keys`属性来实现。

首先，在表格数据中添加一个`children`字段，用于存储子表格数据。例如：

tableData: [
  {
    id: 1,
    name: '张三',
    age: 20,
    children: [
      {
        id: 11,
        name: '张三的儿子',
        age: 1
      },
      {
        id: 12,
        name: '张三的女儿',
        age: 3
      }
    ]
  },
  {
    id: 2,
    name: '李四',
    age: 25
  }
]

然后，在Table表格中设置`expand-row-keys`属性为一个数组，数组中的元素为需要展开的行的key值。例如：

<el-table :data="tableData" :expand-row-keys="expandRowKeys">
  <el-table-column prop="id" label="ID"></el-table-column>
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column label="操作">
    <template slot-scope="scope">
      <el-button v-if="scope.row.children" @click="toggleExpand(scope.row)">展开/收起</el-button>
    </template>
  </el-table-column>
  <el-table-column prop="name" label="子表格" type="expand">
    <template slot-scope="scope">
      <el-table :data="scope.row.children">
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
      </el-table>
    </template>
  </el-table-column>
</el-table>

其中，`toggleExpand`方法用于切换展开和收起状态，并将展开的行的key值存储在`expandRowKeys`数组中。

methods: {
  toggleExpand(row) {
    const index = this.expandRowKeys.indexOf(row.$key);
    if (index === -1) {
      this.expandRowKeys.push(row.$key);
    } else {
      this.expandRowKeys.splice(index, 1);
    }
  }
}

这样就可以实现父子表格的展示了。