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 弄'
      }]
    }
  },