vue+element|el-tree树设置懒加载和设置默认勾选

---

导文

在实际开发中，很多数据过于庞大，需要分批请求，使用到懒加载。但是在tree的方法中，使用懒加载后无法直接使用default-checked-keys默认勾选。想要这个效果该如何实现？
效果展示：

代码实现

在 Vue 项目中使用 Element UI 的 el-tree 组件时，树形数据的懒加载和默认勾选功能是常见的需求。以下是如何实现这两种功能的详细步骤：

1. 基本结构

el-tree 是 Element UI 提供的树形组件，支持懒加载、节点勾选等功能。以下是组件的基本结构：

<el-drawer v-if="drawerVisible" v-model="drawerVisible" title="角色权限" size="50%"><el-treeref="tree":props="treeProps":load="loadNode"lazyshow-checkboxnode-key="id":default-checked-keys="defaultCheckedKeys"@check="onCheckChange"/>
</el-drawer>

关键属性说明：

• lazy：启用懒加载模式。
• load：懒加载数据的方法。
• show-checkbox：显示节点复选框。
• node-key：节点的唯一标识字段。
• default-checked-keys：默认勾选的节点 ID 数组。
• @check：节点勾选状态变化时触发的事件。

2. 懒加载实现

懒加载的核心是通过 load 方法动态加载节点数据。以下是一个示例：

methods: {loadNode(node, resolve) {if (node.level === 0) {// 加载根节点resolve([..//数据列表]);} else if (node.level === 1) {resolve([..//数据列表]);} else {// 其他层级返回空数组resolve([]);}}
}

实现逻辑：

• 根节点加载：当 node.level === 0 时，返回根节点数据。
• 子节点加载：根据父节点的 id 返回对应的子节点数据。
• 叶子节点标记：通过 leaf: true 标记节点为叶子节点，避免进一步加载。

3. 默认勾选功能

通过 default-checked-keys 属性，可以设置默认勾选的节点。该属性接收一个数组，数组中的值为需要勾选的节点 ID。

data() {return {defaultCheckedKeys: ['role', 'user-list'] // 默认勾选的节点 ID};
}

在树加载完成后，el-tree 会自动勾选 defaultCheckedKeys 中指定的节点。

4. 动态加载初始节点

某些场景下需要在树加载完成后自动展开某些节点。可以通过 ref 获取树实例，并调用 expand 方法实现：

methods: {openDrawer() {this.drawerVisible = true;//第一种实现方法this.$nextTick(() => {this.loadInitialNodes();});//第二种实现方法setTimeout(() => {this.loadInitialNodes()}, 500)},loadInitialNodes() {if (this.$refs.tree) {// 展开根节点的所有子节点this.$refs.tree.root.childNodes.forEach(node => {node.expand();});}}
}

实现逻辑：

• 在 openDrawer 方法中，打开抽屉并等待 DOM 更新完成后调用 loadInitialNodes。
• 在 loadInitialNodes 中，通过 this.$refs.tree 获取树实例，并遍历根节点的子节点，调用 expand 方法展开节点。

5. 节点勾选事件监听

通过 @check 事件可以监听节点勾选状态的变化。事件回调函数会返回当前勾选的节点数据和节点对象。

methods: {onCheckChange(checkedData, checkedStatus) {console.log('当前勾选的节点数据:', checkedData);console.log('当前勾选状态:', checkedStatus);}
}

参数说明：

• checkedData：当前勾选的节点数据。
• checkedStatus：包含勾选状态信息的对象，如 checkedKeys（勾选的节点 ID 数组）、halfCheckedKeys（半勾选的节点 ID 数组）等。

完整代码

以下是完整的代码实现：

<template><el-drawer v-if="drawerVisible" v-model="drawerVisible" title="角色权限" size="50%"><el-treeref="tree":props="treeProps":load="loadNode"lazyshow-checkboxnode-key="id":default-checked-keys="defaultCheckedKeys"@check="onCheckChange"/></el-drawer>
</template><script>
export default {data() {return {drawerVisible: false,treeProps: {label: 'name',children: 'children',isLeaf: 'leaf'},defaultCheckedKeys: ['role', 'user-list']};},methods: {openDrawer() {this.drawerVisible = true;//第一种实现方法this.$nextTick(() => {this.loadInitialNodes();});//第二种实现方法setTimeout(() => {this.loadInitialNodes()}, 500)},loadNode(node, resolve) {if (node.level === 0) {// 加载根节点resolve([..//数据列表]);} else if (node.level === 1) {resolve([..//数据列表]);} else {// 其他层级返回空数组resolve([]);}},loadInitialNodes() {if (this.$refs.tree) {this.$refs.tree.root.childNodes.forEach(node => {node.expand();});}},onCheckChange(checkedData, checkedStatus) {console.log('当前勾选的节点数据:', checkedData);console.log('当前勾选状态:', checkedStatus);}}
};
</script>

通过结合 lazy、load、default-checked-keys 等属性，el-tree 提供了强大的功能，能够实现树形数据的懒加载、节点默认勾选和动态展开等需求。根据实际场景，可以灵活使用这些功能来满足需求。

您好，我是肥晨。
欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。