el-tree动态加载子级（结合checkbox）

最新推荐文章于 2025-10-29 09:46:17 发布

原创最新推荐文章于 2025-10-29 09:46:17 发布 · 2.5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#el-tree #动态加载子级 #loadNode

element-ui 专栏收录该内容

5 篇文章

订阅专栏

本文介绍在使用el-tree组件时，如何实现在勾选父级复选框时加载并渲染子级数据的需求。通过分析ElementUI源码，提供了一种解决方案，包括自定义方法getChildren获取子节点数据，及利用node.loadData()手动触发加载。

需求是el-tree 的子级需要在：

展开父级时
勾选父级复选框时

加载子级数据并渲染dom结构。

需求1 还是比较好做的，官方有实例说明；
需求2 的话，翻了下element ui的源码，
checkBox上直接加了@click.native.stop T^T
也就是说点击checkBox的时候根本不会触发loadNode 这个方法
没办法只能去找手动触发的方法了，翻了一遍果然有！！！
node.loadData() 就是这个，具体的看下面代码吧：

<template>
	<el-tree
	  :data="dataList"
	  show-checkbox
	  node-key="code"
	  ref="treeId"
	  @check="getKeys"
	  :expand-on-click-node="true"
	  :load="loadNode"
	  :lazy="lazy"
	>
	</el-tree>
</template>
<script>
export default {
  props: {
  	//	el-tree 的最外层（第一级）数据传入
    dataList: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  methods: {
  	// 请求返回子级数据，在loadNode 方法里调用
    async getChildren(data) {
   		...获取并返回子节点数据
    },
    // 下面方式是你在勾选复选框时也需要加载子级数据时调用，勾选时不需要加载渲染的话就忽略此方法
    async getKeys(data) {
       // 获取当前node节点
       let node = this.$refs.treeId.getNode(data.code);
       // 这个判断条件是楼主自己的需求，可根据实际情况自行调整
       if (
         node.level === 1 &&
         !node.isLeaf &&
         (!node.childNodes || !node.childNodes.length)
       ) {
         await node.loadData(); // 触发当前勾选节点的loadNode 方法
       }
       ... 勾选过后的其他操作
    },
    // 懒加载子节点数据，且如果父节点选中状态时，重新勾选节点（el-tree会因为新增了子节点，自己取消勾选）
    // ！！！这里处理请求子级数据并根据返回数据渲染el-tree的dom树
    async loadNode(node, resolve) {
      let data = node.data;
      let checked = node.checked;
      if (node.level === 1 && !data.children) {
        let res = await this.getChildren();
        resolve(res || []);
        if (checked) {
          this.$refs.treeId.setChecked(data.code, true, true);
          this.getKeys(); // 如果在勾选之后有其他操作，需要再次执行一遍才有效果（踩过坑）
        }
      }
    }
  }
};
</script>

上面就是我找到的解决方案了，如果有小伙伴有更好的方法，欢迎来交流~