带parentId的el-tree如何保存树结构的数据

以下树为带parentId结构,不带的不适用。

1、保存选中节点的数据

首先介绍一下el-tree

html 复制代码
<el-tree
        :data="treeData"
        show-checkbox
        node-key="id"
        :props="defaultProps"
        ref="tree"
        @check-change="getSelectedNodes"
        style="background-color: rgba(0, 0, 0, 0)"
      >

:props里面存数据的对应结构

javascript 复制代码
function getSelectedNodes() {
        data.selectedNodes = data.tree.getCheckedNodes();
        console.log('选中的节点数据', data.selectedNodes);
      }j

2、保存选中节点的叶子节点数据

javascript 复制代码
      function getSelectedNodes() {
        data.selectedNodes = data.tree.getCheckedNodes();
        const Nodes = data.tree.getCheckedNodes();
        let array = [];
        let isLeaf = false;
        data.selectedNodes.map((item) => {
          Nodes.map((i) => {
            if (item.id === i.parentId) {
              isLeaf = true;
            }
          });
          if (isLeaf === true) {
            array.push(item);
            isLeaf = false;
          }
        });
        data.selectedTopNodes = array;
        console.log('叶子节点数据', data.selectedTopNodes);
      }

3、保存选中节点的最顶层节点数据

javascript 复制代码
      function getSelectedNodes() {
        data.selectedNodes = data.tree.getCheckedNodes();
        const Nodes = data.tree.getCheckedNodes();
        let array = [];
        let isLeaf = false;
        let enableContain = false;
        data.selectedNodes.map((item) => {
          Nodes.map((i) => {
            if (item.id === i.parentId) {
              isLeaf = true;
              enableContain = true;
            }
          });
          if (isLeaf === true) {
            array.push(item);
            isLeaf = false;
          }
          if (enableContain === false) {
            array.push(item);
          }
        });
        data.selectedTopNodes = array;
        console.log('最顶层节点数据', data.selectedTopNodes);
      }

需要更多请关注并评论区留言,会继续补充

相关推荐
木子020437 分钟前
前端VUE项目启动方式
前端·javascript·vue.js
endingCode1 小时前
45.坑王驾到第九期:Mac安装typescript后tsc命令无效的问题
javascript·macos·typescript
运维-大白同学1 小时前
将django+vue项目发布部署到服务器
服务器·vue.js·django
Myli_ing2 小时前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
I_Am_Me_2 小时前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
℘团子এ3 小时前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z3 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
星星会笑滴3 小时前
vue+node+Express+xlsx+emements-plus实现导入excel,并且将数据保存到数据库
vue.js·excel·express
前端百草阁3 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜3 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript