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(初始数组, "");
相关推荐
爱吃的强哥18 分钟前
Electron_Vue3 自定义系统托盘及退出二次确认
前端·javascript·electron
技术小丁1 小时前
零依赖!教你用原生 JS 把 JSON 数组秒变 CSV 文件
前端·javascript
古一|1 小时前
Vue路由两种模式深度解析+Vue+SpringBoot生产部署全流程(附Nginx配置)
javascript·vue.js·nginx
Crystal3282 小时前
原生 Vue + UniApp 的小程序或 App 项目里如何判断用户是否为首次下载应用
前端·vue.js
时间的情敌2 小时前
基于 Vue3 及TypeScript 项目后的总结
前端·vue.js·typescript
lpfasd1232 小时前
从 Electron 转向 Tauri:用 Rust 打造更轻、更快的桌面应用
javascript·rust·electron
非凡ghost2 小时前
图吧工具箱-电脑硬件圈的“瑞士军刀”
前端·javascript·后端
非凡ghost2 小时前
Xrecode3(多功能音频转换工具)
前端·javascript·后端
橙某人2 小时前
飞书多维表格插件:进一步封装,提升开发效率!🚀
前端·javascript
非凡ghost2 小时前
Subtitle Edit(字幕编辑软件) 中文绿色版
前端·javascript·后端