前言
有时遇到一些需求就是在使用树形控件时，服务端并没有一次性返回所有数据，而是返回首层节点列表。然后点击展开首层节点中的某个节点，再去请求该节点的子节点列表，那么就得用上懒加载的机制了。在此以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-tree
lazy
ref="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 ~ 10
for (let i = 1; i <= nodeNum; i++) {
res.data.push(
{
name: `哈哈哈-${
i}`,
}
)
}
const hasChild = Math.random() > 0.5
if (hasChild) {
const childNum = parseInt(Math.random() * 5) + 1 // 1 ~ 5
for (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.data
resolve(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 = list
treeLoading.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>
二、运行效果
