elementUi——table表格实现父子项的展示(树形数据)

今天后端同事要求实现如下的效果：

参考的elementUi中的table中的树形数据结构：

支持树类型的数据的显示。当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，必须要指定 row-key。支持子节点数据异步加载。设置 Table 的 lazy 属性为 true 与加载函数 load。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。children 与 hasChildren 都可以通过 tree-props 配置。

通过上面的介绍，我们发现，如果要实现这种树形结构，则需要添加children的数据，因此如果接口返回的数据格式不正确，则需要自行处理一下。

1.数据结构

上面数据结构中的subPlans就是子订单的数据，也就是树形结构折叠隐藏的部分，这部分的参数名需要为children，当然也可以是其他参数名。
为了能够达到树形结构的效果，需要将父级订单和子级订单的参数名保持一致。但是目前subPlans中的数据并不全，则需要对数据进行如下处理：

需要注意的一点是：如果子级也有children,则子级也会有子级结构，因此为了保证只有一级树形结构，则需要将子级的children删除掉。

this.tableData.forEach((t, tIndex) => {
  if (t.subPlans.length > 0) {
    t.children = [];
    var item = JSON.parse(JSON.stringify(t));
    delete item.subPlans;
    delete item.children;
    t.subPlans.forEach((s, sIndex) => {
      s.showName = false;
      if (sIndex == t.subPlans.length - 1) {
        s.operate = true;
      } else {
        s.operate = false;
      }
      t.children.push({
        ...item,
        ...s,
      });
    });
  } else {
    t.children = [];
  }
});

2.html部分代码

需要注意的几点：

1. row-key:这个必须要保证唯一，否则表格渲染会报错
2. default-expand-all:默认折叠部分是打开的状态
3. tree-props:是指定children子级的参数，hasChildren是对应的数据中是否有子级的字段，如果数据结构中没有指定，则写上也是不起作用的

<el-table
  :data="tableData"
  style="width: 100%;margin-bottom: 20px;"
  row-key="id"
  border
  ref="table"
  :height="tableHeight"
  default-expand-all
  v-loading="tableLoading"
  :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
  <el-table-column
    prop="orderNum"
    label="订单编号"
    width="230"
    align="center"
    :show-overflow-tooltip="true"
  >
    <template slot-scope="scope">
      <span v-if="scope.row.showName != false">{{
        scope.row.orderNum
      }}</span>
    </template>
  </el-table-column>
</el-table>

最终效果如下：