Vue Element UI 中 el-table 树形数据 tree-props 多层级使用避坑

<template>
  <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>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        // ... 更多数据
      ]
    };
  }
};
</script>

这个代码实例展示了如何在Vue中使用Element UI的el-table组件来展示树形数据，同时指定了row-key、border和tree-props属性。row-key用于指定唯一键值字段，border添加表格边框，tree-props定义了树形数据的节点字段。这样的实现避免了之前代码中可能遇到的问题，并给出了一个简洁明了的代码示例。