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

Queen_sy2024-01-31 11:00

以下树为带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);
      }

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