简单记录使用 ElementPlus 的虚拟化树形控件(el-tree-v2)心得

前言

首先在 ElementPlus 官方文档中有 el-tree-v2 使用说明，其实和 el-tree 基本一样。不同就是 el-tree-v2 使用了虚拟滚动技术，正如官方文档所说，不论数据量多大，虚拟树都能毫无压力地处理。

一、示例代码

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

<template>
  <div class="index">
    <el-tree-v2
      :ref="'treeRef'"
      :data="treeData"
      :height="400"
      :indent="26"
      :props="defaultProps"
      :show-checkbox="true"
      :default-expand-all="true"
      :highlight-current="true"
      :expand-on-click-node="false"
    >
      <template #default="{ node, data }">
        <!-- 目录 -->
        <span v-if="data.children != null" @click="handleNodeClick(node, data)" style="display: inline-flex; align-items: center;">
          <i style="display: inline-flex; align-items: center;">
            <svg style="margin: 2px 7px 2px 5px" viewBox="0 0 16 16" width="16" height="16">
              <path d="M14,6 L14,5 L7.58578644,5 L5.58578644,3 L2,3 L2,6 L14,6 Z M14,7 L2,7 L2,13 L14,13 L14,7 Z M1,2 L6,2 L8,4 L15,4 L15,14 L1,14 L1,2 Z" stroke-width="1" fill="#8a8e99" />
            </svg>
          </i>
 
          <small :title="node.label">{{ node.label }}</small>
        </span>
 
        <!-- 文档 -->
        <span v-else style="display: inline-flex; align-items: center;">
          <i style="display: inline-flex; align-items: center;">
            <svg style="margin: 2px 5px 2px 3px" viewBox="0 0 16 16" width="16" height="16">
              <path d="M13,6 L9,6 L9,5 L9,2 L3,2 L3,14 L13,14 L13,6 Z M12.5857864,5 L10,2.41421356 L10,5 L12.5857864,5 Z M2,1 L10,1 L14,5 L14,15 L2,15 L2,1 Z" stroke-width="1" fill="#8a8e99" />
            </svg>
          </i>
 
          <small :title="node.label">{{ node.label }}</small>
        </span>
      </template>
    </el-tree-v2>
 
    <div style="margin: 0 100px">
      <el-button size="small" type="primary" @click="handleGetCheckedNodesClick">
        <el-icon :size="14" style="margin-right: 5px"><Check /></el-icon>
        <small>获取选中节点</small>
      </el-button>
    </div>
  </div>
</template>
 
<script setup>
import { onMounted, onUnmounted, ref, getCurrentInstance } from 'vue'
 
// 代理对象
const { proxy } = getCurrentInstance()
 
// 树组件实例
const treeRef = ref(null)
 
// 树形数据
const treeData = ref(
  [
    {
      id: 1,
      name: '香烟 WiFi 啤酒',
      children: [
        {
          id: 2,
          name: '香烟',
          children: [
            {
              id: 3,
              name: '煊赫门'
            },
            {
              id: 4,
              name: 'ESSE双爆珠'
            }
          ],
        },
        {
          id: 5,
          name: '后端开发技术',
          children: [
            {
              id: 51,
              name: 'Java编程技术',
              children: [
                {
                  id: 511,
                  name: 'SpringBoot框架'
                }
              ]
            },
            {
              id: 52,
              name: 'Python编程技术',
              children: [
                {
                  id: 522,
                  name: 'Django框架'
                }
              ]
            }
          ],
        },
        {
          id: 8,
          name: '数据库',
          children: [
            {
              id: 9,
              name: '关系型数据库',
              children: [
                {
                  id: 10,
                  name: 'MySQL'
                },
                {
                  id: 11,
                  name: 'Oracle'
                }
              ],
            },
            {
              id: 12,
              name: '非关系型数据库',
              children: [
                {
                  id: 13,
                  name: 'Redis'
                },
                {
                  id: 14,
                  name: 'Elasticsearch'
                }
              ],
            }
          ],
        },
        {
          id: 15,
          name: 'AI人工智能'
        },
      ],
    },
    {
      id: 16,
      name: '火腿 iPad 泡面'
    },
  ]
)
 
// 树节点属性映射关系
const defaultProps = {
  children: 'children',
  label: 'name',
}
 
 
/**
 * 点击节点事件句柄方法
 */
const handleNodeClick = (node, data) => {
  console.log(node, data)
}
 
/**
 * 获取选中的节点句柄方法
 */
const handleGetCheckedNodesClick = () => {
  const refs = proxy.$refs
  console.log('refs =>', refs)
 
  const treeRef = refs.treeRef
  console.log('treeRef =>', treeRef)
 
  const checkedNodes = treeRef.getCheckedNodes()
  console.log('checkedNodes =>', checkedNodes)
}
 
onMounted(() => {
 // ...
})
</script>
 
<style lang="less" scoped>
  .index {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #f3f6f8;
 
    :deep(.el-tree) {
      height: 400px;
      margin: 100px 100px 50px 100px;
      border: 1px solid #dcdfe6;
 
      /* ---- ---- ---- ---- ^（节点对齐）---- ---- ---- ---- */
      .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 5px 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;
          }
        }
      }
      /* ---- ---- ---- ---- /（节点对齐）---- ---- ---- ---- */
    }
  }
</style>

二、运行效果

 三、参考资料

如何在前端项目中单独引入 ElementUI 图标以及使用_element-icons.woff_帅龍之龍的博客-CSDN博客