树el-tree获取check选中的数据

最新推荐文章于 2024-08-15 15:04:44 发布

小莉爱编程

最新推荐文章于 2024-08-15 15:04:44 发布

阅读量5.2k

点赞数 2

分类专栏： elementUi 文章标签： vue

本文链接：https://blog.csdn.net/qq_45018844/article/details/117564973

版权

elementUi 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Element UI的el-tree组件实现页面布局，并通过@check-change事件获取选中节点，同时展示了如何设置load事件动态加载树数据。重点在于处理节点选择和数据同步的方法。

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

效果在这里插入图片描述
首先通过el-col进行对页面的划分
通过给树绑定@check进行获取当前节点的数据
如果需要将所有的选中的节点放在一个数组，可以通过push

 //获取树选中的
      setCheckedNodes(node){
        this.checkAddData.push(node)
      },

<el-tree
            :props="props"
            :load="loadNode"
            lazy
            accordion
            check-strictly="false"
            @check-change = "setCheckedNodes"
            :default-expanded-keys= '[1]'
            :data="treeData"
            ref="tree"
            node-key="id"
            :filter-node-method="filterNode"
            highlight-current
            show-checkbox>
          </el-tree>

在这里插入图片描述

这里是树绑定的load事件，用来加载这个树的数据

loadNode(node, resolve) {
        this.checkExpend = [1]
        const parentId = (node.level === 0) ? 0 : node.data.id;
        getDeptLazyTree(parentId).then(res => {
          resolve(res.data.data.map(item => {
            return {
              ...item,
              leaf: !item.hasChildren
            }
          }))
        });
      },