标签：subPlans elementUi item 树形 table 数据 children row
今天后端同事要求实现如下的效果：
参考的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>
最终效果如下：
标签：subPlans,elementUi,item,树形,table,数据,children,row 来源： https://blog.csdn.net/yehaocheng520/article/details/119419671
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。