网站建设与规划结课论文,eclipse与jsp网站开发,网页设计优秀案例分析,凡科互动自助解封没用引入组件
可以直接在项目中引入element-plus表格组件#xff0c;如果需要变成下拉列表样式需要添加以下属性#xff1a;
row-key 必填 最好给数字或唯一属性 #xff0c; 给每个节点设置id 不填的话 没有办法实现展开效果 load 这个是动态添加数据的 前提#xff08;开启…引入组件
可以直接在项目中引入element-plus表格组件如果需要变成下拉列表样式需要添加以下属性
row-key 必填 最好给数字或唯一属性 给每个节点设置id 不填的话 没有办法实现展开效果 load 这个是动态添加数据的 前提开启lazy 表格数组里设置了hasChildrentrue treeprops 是配置树状收缩数据的 treeprops {hasChildren} 是否可收缩 treeprops {children} 展开的子项
代码示例 el-table:data(所需要的渲染数据)row-keyidstylewidth: 100%; border: 0.1px solid #ebeef5v-loadingloadinglazy:loadload: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(初始数组, );
