Element-ui Table tree 結構使用（解決無展開箭頭）

這兩天在寫后台管理的頁面，需要使用到 Table ，而且會有下級。就想到了使用 Element table tree 結構。

使用過程中，一直不顯示展開箭頭，摸索調試了大半天，在這里特別記錄下。

在 Table 基礎上使用是比較簡單的，直接加上幾個對應的屬性綁定就可以，代碼如下：

    <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border>
      <el-table-column prop="date" label="日期" sortable width="180" />
      <el-table-column prop="name" label="姓名" sortable width="180" />
      <el-table-column prop="address" label="地址" />
    </el-table>

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 弄'
        }]
      }, {
        id: 4,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1516 弄'
      }]
    }
  }
}

上面這個是正常的使用。

官方示例中，有：:tree-props="{children: 'children', hasChildren: 'hasChildren'}" 綁定的屬性。

所以下面幾點

注意：

1. 必須有 row-key="id"，否則不會顯示展開箭頭；

2. tree-props 中的 children 可以映射為自己數據中的字段，如果一致都可以省略

3. 不是懶加載情況下，不需要 hasChildren（綁定的 table 數據中不能有，否則不能顯示）【我自己就栽在這一條】

4. 不是懶加載下，children 字段一致， tree-props 可以省略，只需要 row-key 即可

 

Table 源碼：

從源碼中看，treeProps 是有默認值的，一樣時不用傳，rowKey 沒有所以一定需要傳。