vue3+element-plus组件下拉列表，数组数据转成树形数据-Toy模板网

这篇具有很好参考价值的文章主要介绍了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' }"//
      >

普通数组转换成树形数据文章来源地址https://www.toymoban.com/news/detail-647110.html

 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(初始数组, "");

到了这里，关于vue3+element-plus组件下拉列表，数组数据转成树形数据的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！