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

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

用法

要实现的文档：

在这里插入图片描述

分页效果：

在这里插入图片描述

实现

新增属性：

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

const { labelName, enablePaging } = optionProps
// 将树拍平的扁平化列表结构，包装成响应式列表，操作一个节点的展开与折叠，其实操作的是响应式列表中的一个元素，以便触发expandedTree计算属性重新计算。
// 转换后的列表数据
const originalFlatData = generateFlatTree(data, optionProps)
// 将树拍平的扁平化列表结构，包装成响应式列表，操作一个节点的展开与折叠，其实操作的是响应式列表中的一个元素
const flatData = ref<IFlatTreeNode[]>(originalFlatData)
let pageContent = () => {}
if (enablePaging) {const pageNo = ref(1)const pageSize = optionProps.pageSize || 20const pageNum = Math.ceil(data.length / pageSize)watch(pageNo,() => {flatData.value = originalFlatData.slice((pageNo.value - 1) * pageSize, pageNo.value * pageSize) as any},{immediate: true})pageContent = () => (<div class='juan-tree-pagination mt-6'><button disabled={pageNo.value <= 1} onClick={() => pageNo.value--}>上一页</button><button class='ml-4' disabled={pageNo.value >= pageNum} onClick={() => pageNo.value++}>下一页</button><span class='ml-4'><span class='mr-4'>第{pageNo.value}页</span><span>共{pageNum}页</span></span></div>)
}