今天后端同事要求实现如下的效果:
参考的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
部分代码
需要注意的几点:
-
row-key
:这个必须要保证唯一,否则表格渲染会报错 -
default-expand-all
:默认折叠部分是打开的状态 -
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>
最终效果如下: