新手建网站视频教程阿里云 网站

引入组件

可以直接在项目中引入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(初始数组, "");