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

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

1、保存选中节点的数据

首先介绍一下el-tree

<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里面存数据的对应结构

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

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

      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、保存选中节点的最顶层节点数据

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

 

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

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-01-30 16:36:01       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-01-30 16:36:01       100 阅读
  3. 在Django里面运行非项目文件

    2024-01-30 16:36:01       82 阅读
  4. Python语言-面向对象

    2024-01-30 16:36:01       91 阅读

热门阅读

  1. oracle版本号中的i,G,C代表什么含义

    2024-01-30 16:36:01       63 阅读
  2. Vscode移植到VS2010遇到的问题C++

    2024-01-30 16:36:01       56 阅读
  3. C++发起Https请求

    2024-01-30 16:36:01       47 阅读
  4. Pull模式和Push模式

    2024-01-30 16:36:01       61 阅读
  5. 《zdppy_aocrud官方教程》 05 自动生成更新接口

    2024-01-30 16:36:01       49 阅读
  6. 算法训练营Day59(单调栈)

    2024-01-30 16:36:01       63 阅读
  7. 【算法】动态规划引入

    2024-01-30 16:36:01       59 阅读