带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);
      }

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

相关推荐
DanB2412 分钟前
html复习
javascript·microsoft·html
呼啦啦呼啦啦啦啦啦啦6 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
前端 贾公子9 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录9 小时前
链表合并:双指针与递归
前端·javascript·算法
拼图2099 小时前
element-plus——图标推荐
javascript·vue.js·elementui
期待のcode9 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
koooo~10 小时前
JavaScript中的Window对象
开发语言·javascript·ecmascript
安心不心安11 小时前
React hooks——useReducer
前端·javascript·react.js
像风一样自由202011 小时前
原生前端JavaScript/CSS与现代框架(Vue、React)的联系与区别(详细版)
前端·javascript·css
啃火龙果的兔子11 小时前
react19+nextjs+antd切换主题颜色
前端·javascript·react.js