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

今天后端同事要求实现如下的效果:
elementUi——table表格实现父子项的展示(树形数据)
参考的elementUi中的table中的树形数据结构:

elementUi——table表格实现父子项的展示(树形数据)
支持树类型的数据的显示。当 row 中包含 children 字段时,被视为树形数据。渲染树形数据时,必须要指定 row-key。支持子节点数据异步加载。设置 Tablelazy 属性为 true 与加载函数 load。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。childrenhasChildren 都可以通过 tree-props 配置。

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

1.数据结构

elementUi——table表格实现父子项的展示(树形数据)
上面数据结构中的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>

最终效果如下:
elementUi——table表格实现父子项的展示(树形数据)

上一篇:elementUi动态增减表单项更改为增减select选择


下一篇:elementUI的树形tree组件的使用