el-table通过tree-props实现表格嵌套表格

1、html代码如下：

<el-table>
    :data="tableData"
    style="width: 100%;margin-bottom: 20px;"
    row-key="id"
    border
    default-expand-all
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column
      prop="date"
      label="日期"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
</el-table>
//这里有2点需要注意：
1、row-key="id"；
2、:tree-props="{children: 'children', hasChildren: 'hasChildren'}"。

2、js代码：

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: '上海市普陀区金沙江路 1519 弄'
            }, {
              id: 32,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
          }]
        }]
	  }
	}
}
//注意children里面的id

总结：

1、el-table属性 row-key 一定要写。
2、如果children和hasChildren不是默认则需要指定 :tree-props=”{children:’children’, hasChildren:’hasChildren’}”
3、lazy为false时，数据不能包含hasChildren字段

以上是编程学习网小编为您介绍的“el-table通过tree-props实现表格嵌套表格”的全面内容，想了解更多关于 vuejs 内容，请继续关注编程基础学习网。