vue3+element-plus组件下拉列表,数组数据转成树形数据

引入组件

可以直接在项目中引入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(初始数组, "");
相关推荐
江城开朗的豌豆6 分钟前
React应用优化指南:让我的项目性能“起飞”✨
前端·javascript·react.js
Asort30 分钟前
JavaScript 从零开始(六):控制流语句详解——让代码拥有决策与重复能力
前端·javascript
EMT1 小时前
在 Vue 项目中使用 URL Query 保存和恢复搜索条件
javascript·vue.js
艾小码1 小时前
还在被超长列表卡到崩溃?3招搞定虚拟滚动,性能直接起飞!
前端·javascript·react.js
前端康师傅1 小时前
JavaScript 作用域常见问题及解决方案
前端·javascript
我是日安1 小时前
从零到一打造 Vue3 响应式系统 Day 9 - Effect:调度器实现与应用
前端·vue.js
Mintopia1 小时前
🚀 Next.js 全栈 E2E 测试:Playwright vs Cypress
前端·javascript·next.js
原生高钙1 小时前
JS设计模式指南
前端·javascript
Mintopia1 小时前
⚡ WebAssembly 如何加速 AIGC 模型在浏览器中的运行效率?
前端·javascript·aigc
断竿散人1 小时前
乾坤微前端框架的沙箱技术实现原理深度解析
前端·javascript·前端框架