el-tree动态加载子级( 结合checkbox)

景令秋
2023-12-01

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

  1. 展开父级时
  2. 勾选父级复选框时

加载子级数据并渲染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>

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

 类似资料: