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

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

相关推荐
zhanshuo8 分钟前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
讨厌吃蛋黄酥10 分钟前
智能前端新纪元:语音交互技术与安全实践全解析
javascript
khalil11 分钟前
基于 Vue3实现一款简历生成工具
前端·vue.js
1234Wu38 分钟前
React Native 接入 eCharts
javascript·react native·react.js
脑袋大大的8 小时前
JavaScript 性能优化实战:减少 DOM 操作引发的重排与重绘
开发语言·javascript·性能优化
速易达网络9 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘9 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
JoJo_Way9 小时前
LeetCode三数之和-js题解
javascript·算法·leetcode
视频砖家10 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj16899710 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode