el-tree 如何拿到选中节点的父节点

weixin_50911602

已于 2022-08-19 15:25:15 修改

阅读量4k

点赞数 6

文章标签： vue.js elementui javascript

于 2022-08-19 15:23:36 首次发布

本文链接：https://blog.csdn.net/weixin_50911602/article/details/126425679

版权

本文介绍了如何在Vue.js应用中使用El-Tree组件，展示了一个带有复选框、节点点击和数据处理功能的树形结构。通过`handleCheckChange`方法获取选中和半选中的节点数据，并演示了如何从数据结构中提取当前选中节点的父节点信息。文章适合对Vue.js和前端组件有一定了解的读者。

摘要由CSDN通过智能技术生成

<div class="tree-box">
        <el-tree
          ref="tree"
          :data="loadCases"
          show-checkbox
          :check-on-click-node="true"
          node-key="id"
          highlight-current
          :expand-on-click-node="false"
          @check="handleCheckChange" // 用check可以获取到要用的属性
        />
      </div>

handleCheckChange(datas) {
      const data = this.loadCases[0].children;
      const array = this.$refs.tree.getCheckedNodes();
      // 获取选中的节点和半选中节点
      const AllcheckedNodes = this.$refs.tree.getCheckedNodes(false, true);
      // 选中的节点的索引
      const chilIndex = AllcheckedNodes.findIndex(item => item.label === datas.label);
      // 截取索引1 到 选中的之间的数据
      const newAll = AllcheckedNodes.slice(1, chilIndex);
      // 反转数据并拿到的第一个就是当前选中的父节点
      const parent = newAll.reverse().find(item => item.children);

看了很多前辈的然后仔细研究了一下获取到的数剧所得到

我的数据结构比较简单只有两层，更深入的话，你们也可以试一下拿到的数据然后进行筛选过滤

喜欢就给个小花花哦