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 || 20
  const 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>
  )
}

使用tsx的好处

我们发现，在基于enablePaging的设置，判断是否要进行分页功能整合的代码逻辑，是集中维护在一个if语句块中，包括pageContent渲染函数，这就非常利于代码的维护。这也是为什么在包含多配置选项的复杂组件开发中提倡使用tsx的原因。

模板的调整：