在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-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>

二、运行效果

// Todo