element-ui树形表格实现多层级嵌套，原来这么简单！

多层级效果图，点击自动收缩：

话不多说，附上代码，此次代码示例全部为静态数据；

1.表格数据如下图

    <el-table
      :data="tableData1"
      style="width: 100%"
      row-key="id"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <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>

2.数据结构如下图，其实只需要在有子节点的地址加上children即可！官网都没有说明白，搞得自己研究了半小时。 

data() {
    return {
      tableData1: [{
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      {
        id: 2,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄',
        children: [
          {
            id: 31,
            date: '2020-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
            children: [
              {
                id: 33,
                date: '2020-05-32',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
              }
            ]
          },
          {
            id: 32,
            date: '2020-05-32',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
            children: [
              {
                id: 34,
                date: '2020-05-32',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
              }
            ]
          }
        ]
      },
      {
        id: 3,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        hasChildren: true
      },
      {
        id: 4,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },