在Vue3+ElementPlus项目中使用具有懒加载的el-tree树形控件

前言

有时遇到一些需求就是在使用树形控件时，服务端并没有一次性返回所有数据，而是返回首层节点列表。然后点击展开首层节点中的某个节点，再去请求该节点的子节点列表，那么就得用上懒加载的机制了。在此以ElementPlus的树形控件为例，实现一个具有懒加载的树形控件的示例页面。

传送门：https://element-plus.gitee.io/zh-CN/component/tree.html

一、示例代码

（1）/src/views/Example/ElTreeLazy/index.vue

<template><el-scrollbar v-loading="treeLoading" element-loading-text="数据正在渲染中..." class="element-plus-tree"><el-treelazyref="treeRef":props="defaultProps":data="treeData":load="loadNode":show-checkbox="false":default-expand-all="false":highlight-current="true":expand-on-click-node="false"@node-click="handleNodeClick"><template #default="{ node, data }"><span v-if="!data.leaf" class="node-folder"><el-icon v-if="node.expanded" style="margin: 0 6px 0 0px;" size="16"><FolderOpened /></el-icon><el-icon v-else style="margin: 0 6px 0 0px;" size="16"><Folder /></el-icon><small :title="node.label">{{ node.label }}</small></span><span v-else class="node-file"><el-icon style="margin: 0 6px 0 0px;" size="16"><Document /></el-icon><small :title="node.label">{{ node.label }}</small></span></template></el-tree></el-scrollbar>
</template><script setup>
import { onMounted, onUnmounted, ref, getCurrentInstance, defineExpose } from 'vue'// 代理对象
const { proxy } = getCurrentInstance()// 树组件实例
const treeRef = ref(null)// 树组件数据
const treeData = ref([])// 加载中
const treeLoading = ref(true)// 树节点属性映射关系
const defaultProps = {children: 'children',label: 'name',isLeaf: 'leaf',
}/*** 加载节点*/
const loadNode = async (node, resolve) => {// 首层节点，即：根节点if (node.level === 0) {resolve(node.data)}// 第二层节点if (node.level === 1) {// 判断某个节点的子节点列表是否非空，非空则不调用接口，否则调用接口查询该节点的列表if (node.data.children) {resolve(node.data.children)} else {setTimeout(() => {const res = { success: true, data: [] }if (res.success) {const nodeNum = parseInt(Math.random() * 10) + 1 // 1 ~ 10for (let i = 1; i <= nodeNum; i++) {res.data.push({name: `哈哈哈-${i}`,})}const hasChild = Math.random() > 0.5if (hasChild) {const childNum = parseInt(Math.random() * 5) + 1 // 1 ~ 5for (let vo of res.data) {vo.children = []for (let i = 1; i <= childNum; i++) {vo.children.push({name: `嘻嘻嘻-${i}`,})}}}console.log('叶子节点加工前 =>', res)handleJudgeLeafrecursion(res.data)console.log('叶子节点加工后 =>', res)} else {proxy.$message({ message: '请求失败', type: 'error', duration: 3000 })}node.data.children = res.dataresolve(node.data.children)}, 200)}}// 第三层节点，以及其它层节点if (node.level > 1) {if (node.data.children && node.data.children.length > 0) {resolve(node.data.children)} else {resolve([])}}
}/*** 获取首层节点数据列表*/
const getFirstLevelNodeData = () => {const res = {success: true,data: ['香烟Wifi啤酒', '火腿iPad泡面', '骑着蜗牛散步', '都随它大小便吧', '没有强度，全是手法']}const list = []setTimeout(() => {if (res.success) {for (let i = 0; i < res.data.length; i++) {list.push({'id': i + 1,'name': res.data[i],})}} else {proxy.$message({ message: '请求失败', type: 'error', duration: 3000 })}treeData.value = listtreeLoading.value = false}, 200)
}/*** 判断叶子节点递归方法*/
const handleJudgeLeafrecursion = (list) => {for (let vo of list) {// 若无 children 或 children 大小为零，即判定该节点为叶子节点if (vo.children == null || vo.children.length == 0) {vo.leaf = true} else {handleJudgeLeafrecursion(vo.children)}}
}/*** 树节点点击事件句柄方法*/
const handleNodeClick = (data) => {console.log('handleNodeClick =>', data)
}// 子组件通过 defineExpose 暴露指定的属性给父组件
defineExpose({treeRef, // 暴露树组件实例
})onMounted(() => {getFirstLevelNodeData()
})onUnmounted(() => {// ...
})
</script><style lang="less" scoped>.element-plus-tree {height: 100%;:deep(.el-tree) {padding-left: 5px;/* ---- ---- ---- ---- ^（节点对齐）---- ---- ---- ---- */.el-tree-node {/* ^ 所有节点 */i.el-tree-node__expand-icon {padding: 6px;margin-right: 5px;&::before {font-family: element-ui-icons;font-style: normal;content: "\e6d9";color: #000000;border: 1px solid #606266;border-radius: 2px;}svg {display: none; // 隐藏所有节点的 svg 图标}}/* / 所有节点 *//* ^ 已展开的父节点 */i.el-tree-node__expand-icon.expanded {transform: rotate(0deg); // 取消旋转-webkit-transform: rotate(0deg); // 取消旋转&::before {font-family: element-ui-icons;font-style: normal;content: "\e6d8";color: #000000;border: 1px solid #606266;border-radius: 2px;}}/* / 已展开的父节点 *//* ^ 叶子节点 */i.el-tree-node__expand-icon.is-leaf {&::before {display: none;}}/* / 叶子节点 *//* ^ 复选框 */.el-checkbox {margin: 0 7px 0 2px;.el-checkbox__inner {width: 14px;height: 14px;border-radius: 2px;border: 1px solid #bbb;}.el-checkbox__input.is-checked .el-checkbox__inner,.el-checkbox__input.is-indeterminate .el-checkbox__inner {border: 1px solid #5e7ce0;}}/* / 复选框 */.el-tree-node__content {small {font-size: 13px;padding-right: 5px;transition: all ease 0.1s;}}}/* ---- ---- ---- ---- /（节点对齐）---- ---- ---- ---- *//* ---- ---- ---- ---- ^（文字/背景高亮）---- ---- ---- ---- */.el-tree-node {.el-tree-node__content {background-color: transparent;.node-root {display: flex;align-items: center;small {font-weight: bold;color: #40485c;transition: all ease 0.3s;}}.node-folders {display: flex;align-items: center;small {font-weight: bold;color: #40485c;transition: all ease 0.3s;}}.node-folder {display: flex;align-items: center;small {font-weight: bold;color: #40485c;transition: all ease 0.3s;}}.node-file {display: flex;align-items: center;small {font-weight: normal;color: #40485c;transition: all ease 0.3s;}}&:hover small {color: #5e7ce0;}}}.el-tree-node.is-current {.el-tree-node__content {small {color: #5e7ce0;}}.el-tree-node__children {small {color: unset;}}}&.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {background-color: #eff2fc;// background-color: #b6c7ff;i::before, i::after {// border-color: #fff;// color: #fff;border-color: #002293;color: #002293;}small {// color: #fff;color: #002293;}}/* ---- ---- ---- ---- /（文字/背景高亮）---- ---- ---- ---- *//* ---- ---- ---- ---- ^（新增辅助线）---- ---- ---- ---- *//* ^ 树节点 */.el-tree-node {position: relative;width: auto;width: max-content; // 显示文字宽度padding-left: 13px;&::before {width: 1px;height: 100%;content: '';position: absolute;top: -38px;bottom: 0;left: 0;right: auto;border-width: 1px;border-left: 1px solid #b8b9bb;}&::after {width: 13px;height: 13px;content: '';position: absolute;z-index: 0;left: 0;right: auto;top: 12px;bottom: auto;border-width: 1px;border-top: 1px solid #b8b9bb;}.el-tree-node__content {position: relative;z-index: 1;padding-left: 0 !important;/* ^ 复选框 */.el-checkbox {margin: 0 10px 0 0.5px;}/* / 复选框 */}.el-tree-node__children {padding-left: 12px;}&:last-child::before {height: 50px;}}/* / 树节点 *//* ^ 第一层节点 */> .el-tree-node {padding-left: 0;&::before {border-left: none;}&::after {border-top: none;}.el-tree-node__content {i.el-tree-node__expand-icon.is-leaf {margin-right: 5px;}}}/* / 第一层节点 *//* ---- ---- ---- ---- /（新增辅助线）---- ---- ---- ---- */}}
</style>

二、运行效果

// Todo