el-table组件中的tree-props属性的使用？

Question

当想渲染一个树形数据时，考虑到内外层数据渲染，所以采用了element现有的组件，但是在使用过程中，频繁出现row-key绑定问题以及子层级不渲染问题。
如下数据结构和字段：

 tableData: [{
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          children: [{
              cid: 31,
              cdate: '2016-05-01',
              cname: '王小虎',
              caddress: '上海市普陀区金沙江路 1弄'
            }, {
              cid: 32,
              cdate: '2016-05-01',
              cname: '王小虎',
              caddress: '上海市普陀区金沙江路 2 弄'
          }]
        }, {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]

所以关于该组件和属性的使用，需要对其父子层级的数据结构和字段，否则无效。
那么，有几个问题：当如上数据结构时，有可以解决的组件使用吗？当某一列有子级时点击可以展开；
row-key绑定的是父级还是父、子级;

Answer 1

<template>
  <el-table
    :data="tableData"
    row-key="id"
    :tree-props="{children: 'children'}"
    border>
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: 2,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        id: 3,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        children: [{
          id: 31,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1弄'
        }, {
          id: 32,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 2 弄'
        }]
      }, {
        id: 4,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  }
}
</script>

Answer 2

  <el-table
    :data="tableData"
    :row-key="(row) => {
      if(row.id) {
        return row.id
      }else {
        return row.cid
      }
    }"
    :tree-props="{children: 'children'}"
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
  </el-table>

rowKey支持function

Answer 3

这个文档可以参看下：tree-props 多层级使用避坑
如果是唯一字段id不一致的情况，可以在前端递归处理成一致的