引入组件
可以直接在项目中引入element-plus表格组件,如果需要变成下拉列表样式需要添加以下属性:
row-key 必填 最好给数字或唯一属性 , 给每个节点设置id 不填的话 没有办法实现展开效果
load 这个是动态添加数据的 前提(开启lazy ,表格数组里设置了hasChildren:true)
treeprops 是配置树状收缩数据的
treeprops :{hasChildren} 是否可收缩
treeprops :{children} 展开的子项
代码示例:
<el-table
:data="
(所需要的渲染数据)
"
row-key="id"
style="width: 100%; border: 0.1px solid #ebeef5"
v-loading="loading"
lazy
:load="load"
:tree-props="{ hasChildren: 'hasChildren', children: 'children' }"//
>
普通数组转换成树形数据
const transListDataToTreeData = (list, root) => {
console.log(list);
const arr = [];
// 1.遍历
list.forEach(item => {
// 2.首次传入空字符串 判断list的pid是否为0 如果为空就是一级节点
if (item.pid === root) {
// 找到之后就要去找item下面有没有子节点 以 item.id 作为 父 id, 接着往下找
const children = transListDataToTreeData(list, item.id);
if (children.length > 0) {
// 如果children的长度大于0,说明找到了子节点
item.children = children;
}
// 将item项, 追加到arr数组中
arr.push(item);
console.log(arr);
console.log(arr);
}
});
return arr;
};
transListDataToTreeData(初始数组, "");