Vue3扁平化Tree组件的前端分页实现

原创

已于 2024-07-25 06:17:28 修改 · 656 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue3 #tree #vite #tree分页

于 2024-07-24 11:25:39 首次发布

大家好，我是小卷。得益于JuanTree的扁平化设计，在数据量很大的情况下除了懒加载，使用前端分页也是一种解决渲染性能问题的可选方案。

用法

要实现的文档：

在这里插入图片描述

分页效果：

在这里插入图片描述

实现

新增属性：

组件setup方法中新增的核心逻辑：

const {
   
    labelName, enablePaging } = optionProps
// 将树拍平的扁平化列表结构，包装成响应式列表，操作一个节点的展开与折叠，其实操作的是响应式列表中的一个元素，以便触发expandedTree计算属性重新计算。
// 转换后的列表数据
const originalFlatData = generateFlatTree(data, optionProps)
// 将树拍平的扁平化列表结构，包装成响应式列表，操作一个节点的展开与折叠，其实操作的是响应式列表中的一个元素
const flatData = ref<IFlatTreeNode[]