Vue3大数据树状表格的虚拟滚动实现

究极死胖兽2023-08-12 15:14

前言

ant-design-vue 团队开发的付费高级组件 Surely Table 可支持最多 12万 条数据的渲染，超过 13万 条数据浏览器就会报错。从报错信息来看，是因为计算量太大超出了浏览器的支持范围。分析其原因是由于 Surely Table 作为一个成熟的商业组件，其具备各种丰富的功能，要在支持大数据渲染的同时还要支持这么多功能，必定需要相当大的计算量。如果我们根据具体需求封装一个表格组件，而这个表格组件只需要支持我们需要的功能，那么表格组件同时渲染的数据数量就必定能突破 13万 条。

本文将按照基础表格、大数据表格、基础树状表格、大数据树状表格的顺序，一步一步进行拓展，最终完成可支持 48万 条数据的树状表格，这个数据是按 ant-design-vue 中表格默认行高 55px 来实现的，如果将行高稍微调小，甚至可突破 50万 条。由此推测是达到了浏览器能支持的最大元素高度。

仓库地址：sps-table: 大数据树状表格的虚拟滚动实现 (gitee.com)

基础设置

为简化在表格样式上的开发工作，使用了 bootstrap 。

表格组件所需要用的类型定义：

ts 复制代码 
// /components/type.ts
import { ExtractPropTypes, PropType, VNode } from 'vue'

// 列插槽参数
interface ColumnSlotParams {
  text: string
  record: any
  index: number
  column: ColumnProps
}

// 列属性
export interface ColumnProps {
  key: string
  title: string
  customRender?: (params: ColumnSlotParams) => VNode
}

// 表格属性
export const tableProps = {
  columns: {
    type: Array as PropType<ColumnProps[]>,
    default: () => []
  },
  dataSource: {
    type: Array as PropType<any[]>,
    default: () => []
  },
  cellHeight: {
    type: Number,
    default: 55
  },
  scrollY: {
    type: Number,
    default: 600
  }
}

// 表格属性类型
export type TableProps = ExtractPropTypes<typeof tableProps>

处理表头数据的hook函数：

ts 复制代码 
// /components/hook/useTableHeader.ts
import { computed, ref } from 'vue'
import { TableProps } from '../type'

export default function useTableHeader(props: TableProps) {
  const headerRef = ref<HTMLElement | null>(null)

  const tableHeaders = computed(() => {
    return props.columns.map((column) => column.title)
  })

  return {
    headerRef,
    tableHeaders
  }
}

基础表格

先实现一个最简单的基础表格，单元格支持自定义 render 函数。

tsx 复制代码 
// /components/Table
import { defineComponent } from 'vue'
import { tableProps } from './type'
import useTableHeader from './hook/useTableHeader'

export default defineComponent({
  name: 'Table',
  props: tableProps,
  setup(props) {
    const { tableHeaders } = useTableHeader(props)
    /* render 函数 */
    return () => {
      const { dataSource, columns } = props
      return (
        <table class="table">
          <thead>
            <tr>
              {tableHeaders.value.map((header) => (
                <th>{header}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {dataSource.map((item) => (
              <tr key={item.id}>
                {columns.map((column, index) => {
                  const { customRender, key } = column
                  return (
                    <td>
                      {customRender
                        ? customRender({
                            text: item[key]?.toString(),
                            record: item,
                            index,
                            column
                          })
                        : item[key]}
                    </td>
                  )
                })}
              </tr>
            ))}
          </tbody>
        </table>
      )
    }
  }
})

在页面中应用组件：

js 复制代码 
// App.tsx
import { defineComponent, onMounted, ref } from 'vue'
import Table from './components/Table'

const data: any[] = []
for (let i = 0; i < 5; ++i) {
  data.push({
    id: i,
    name: `员工${i}`,
    city: 'BJ'
  })
}

export default defineComponent({
  name: 'App',
  setup() {
    const dataSource = ref<any[]>([])

    const service = () => {
      return new Promise<any[]>((resolve) => {
        setTimeout(() => {
          resolve(data)
        }, 100)
      })
    }

    onMounted(async () => {
      const data = await service()
      dataSource.value = data
    })
    /* render 函数 */
    return () => {
      return (
        <div>
          <Table
            columns={[
              {
                title: '姓名',
                key: 'name'
              },
              {
                title: '城市',
                key: 'city'
              },
              {
                title: '操作',
                key: 'option',
                customRender({ record }) {
                  return (
                    <button
                      class="btn btn-primary"
                      onClick={() => console.log(record.name)}>
                      提示
                    </button>
                  )
                }
              }
            ]}
            dataSource={dataSource.value}
          />
        </div>
      )
    }
  }
})

效果如下图所示：

大数据表格

基础表格组件的数据量达到几千条时就会出现白屏和卡顿，数据量上万条后就会更加明显。要实现大数据渲染，就需要用到虚拟滚动技术。

实现虚拟滚动步骤：

  1. 根据表格高度与每行高度计算出表格实际可展示的数据条数。假如表格高度（除开表头）为500px，而行高为50px，那么表格实际可展示的数据就为10条。
  2. 在表格内容的上方和下方各插入一个空白元素，监听滚动条的滚动事件，根据滚动条的位置，动态改变两个空白元素的高度，从而保证无论怎么滚动，要渲染的数据都处于可见位置。假如有100条数据，当滚动条滚动到距顶部40%的位置时，则表格内容区域总高度为5000px（50px * 100，行高 * 数据条数），上方空白元素的高度为2000px（5000px * 40%，总高度 * 顶部偏移量），下方空白元素高度为2500px（5000px * 60% - 500px，总高度 * 底部偏移量 - 表格高度）。
  3. 在滚动条的滚动事件中改变渲染的表格数据。在上述假设中，初始状态时渲染第1-10条数据，当滚动到距顶部40%的位置时，渲染第41-50条数据。

下面是具体代码实现：

tsx 复制代码 
// /components/hook/useVirtualScroll.ts
import { Ref, computed, ref } from 'vue'
import { TableProps } from '../type'

export default function useVirtualScroll(
  props: TableProps,
  headerRef: Ref<HTMLElement | null>
) {
  // 实际渲染数据的起始索引
  const startIndex = ref(0)

  // 表格实际可展示的数据条数
  const count = computed(() => {
    const { cellHeight, scrollY } = props
    const headerHeight = headerRef.value ? headerRef.value.clientHeight : 0
    return Math.ceil((scrollY - headerHeight) / cellHeight)
  })

  // 实际渲染数据
  const tableData = computed(() => {
    const { dataSource } = props
    const start = startIndex.value
    const end = Math.min(start + count.value, dataSource.length)
    return dataSource.slice(start, end)
  })

  // 滚动监听事件
  const onScroll = (e: Event) => {
    const { scrollTop, scrollHeight } = e.target as HTMLElement
    // 根据滚动位置计算出实际渲染数据的起始索引
    startIndex.value = Math.floor(
      (scrollTop / scrollHeight) * props.dataSource.length
    )
  }

  return {
    startIndex,
    count,
    tableData,
    onScroll
  }
}


// /components/ScrollTable
import { defineComponent } from 'vue'
import { tableProps } from './type'
import useTableHeader from './hook/useTableHeader'
import useVirtualScroll from './hook/useVirtualScroll'

export default defineComponent({
  name: 'ScrollTable',
  props: tableProps,
  setup(props) {
    const { tableHeaders, headerRef } = useTableHeader(props)
    const { tableData, startIndex, count, onScroll } = useVirtualScroll(
      props,
      headerRef
    )
    /* render 函数 */
    return () => {
      const { dataSource, columns, scrollY, cellHeight } = props
      return (
        <div
          //设置表格高度，将表格设置为子元素高度超出时显示滚动条
          style={{ height: `${scrollY}px`, overflowY: 'auto' }}
          onScroll={onScroll}>
          <table class="table">
            <thead ref={headerRef}>
              <tr>
                {tableHeaders.value.map((header) => (
                  <th>{header}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {/* 表格内容上方插入空白元素 */}
              <div style={{ height: `${startIndex.value * cellHeight}px` }} />
              {/* 表格实际渲染内容 */}
              {tableData.value.map((item) => (
                <tr style={{ height: `${cellHeight}px` }} key={item.id}>
                  {columns.map((column, index) => {
                    const { customRender, key } = column
                    return (
                      <td>
                        {customRender
                          ? customRender({
                              text: item[key]?.toString(),
                              record: item,
                              index,
                              column
                            })
                          : item[key]}
                      </td>
                    )
                  })}
                </tr>
              ))}
              {/* 表格内容下方插入空白元素 */}
              <div
                style={{
                  height: `${
                    (dataSource.length - startIndex.value - count.value) *
                    cellHeight
                  }px`
                }}
              />
            </tbody>
          </table>
        </div>
      )
    }
  }
})

在大数据表格组件实现中最关键的就是 startIndex 这个 ref 变量。它表示实际渲染数据的起始索引。实际渲染的表格数据，上下方插入的空白元素高度都是根据它动态计算出来的。只要在滚动事件中根据滚动偏移量，改变 startIndex 的值，就能实现虚拟滚动的效果。

最后在页面中引入大数据表格组件，并将数据改为 40万 条：

tsx 复制代码 
// App.tsx
import Table from './components/ScrollTable'

const data: any[] = []
for (let i = 0; i < 400000; ++i) {
  data.push({
    id: i,
    name: `员工${i}`,
    city: 'BJ'
  })
}

可以看到首屏渲染时间几乎为0，且滚动丝滑流畅：

树状表格

接下是在基础表格组件的基础上实现树状表格组件。树状表格组件与普通表格组件相比，需要对数进行遍历，根据节点的展开状态确定需要渲染的数据。

tsx 复制代码 
// /components/hook/useTreeData.ts
import { computed, ref } from 'vue'
import { TableProps } from '../type'

export default function useTreeData(props: TableProps) {
  const expandedRowKeys = ref<string[]>([])

  // 判断节点是否展开
  const isExpanded = (key: string) => {
    return expandedRowKeys.value.includes(key)
  }

  // 切换节点展开状态
  const toggleExpand = (key: string) => {
    const index = expandedRowKeys.value.findIndex((item) => item === key)
    index >= 0
      ? expandedRowKeys.value.splice(index, 1)
      : expandedRowKeys.value.push(key)
  }

  // 遍历树
  const walkTree = (data: any[], walkData: any[], level = 0) => {
    for (let item of walkData) {
      data.push({
        ...item,
        level
      })
      if (isExpanded(item.id) && item.children) {
        walkTree(data, item.children, level + 1)
      }
    }
  }

  // 实际渲染数据
  const tableData = computed(() => {
    const data: any[] = []
    const { dataSource } = props
    walkTree(data, dataSource)
    return data
  })

  return {
    isExpanded,
    toggleExpand,
    tableData
  }
}

// /components/TreeTable
import { defineComponent } from 'vue'
import { tableProps } from './type'
import useTableHeader from './hook/useTableHeader'
import useTreeData from './hook/useTreeData'

export default defineComponent({
  name: 'TreeTable',
  props: tableProps,
  setup(props) {
    const { tableHeaders } = useTableHeader(props)
    const { isExpanded, toggleExpand, tableData } = useTreeData(props)
    /* render 函数 */
    return () => {
      const { columns } = props
      return (
        <table class="table">
          <thead>
            <tr>
              {tableHeaders.value.map((header) => (
                <th>{header}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {tableData.value.map((item, index) => (
              <tr key={item.id}>
                {columns.map((column, columnIndex) => {
                  const { customRender, key } = column
                  const { id, level = 0 } = item
                  return (
                    <td>
                      {columnIndex === 0 && (
                        <button
                          class="btn btn-light btn-sm"
                          style={{
                            marginLeft: `${level * 20}px`,
                            marginRight: '5px'
                          }}
                          onClick={() => toggleExpand(id)}>
                          {isExpanded(id) ? '-' : '+'}
                        </button>
                      )}
                      {customRender
                        ? customRender({
                            text: item[key]?.toString(),
                            record: item,
                            index,
                            column
                          })
                        : item[key]}
                    </td>
                  )
                })}
              </tr>
            ))}
          </tbody>
        </table>
      )
    }
  }
})

在树状表格组件实现中最关键的是 walkTree 函数，该函数对整个树状数据进行遍历，当遍历到某个节点时，先将该节点及其所在层级加入到渲染数据中，再根据该节点是否处于展开状态，是否有子节点，来决定是否将其全部子节点递归加入到渲染数据中。

在视图上，在第一列单元格的前方增加一个展开/折叠按钮，触发相应的事件，并根据数据所在的层级来进行缩进。

在页面中引入树状表格组件，并将模拟数据换为树状数据：

tsx 复制代码 
// App.tsx
import Table from './components/TreeTable'

const treeData: any[] = []
for (let i = 0; i < 4; ++i) {
  const level1Data: any[] = []
  for (let j = 0; j < 10; ++j) {
    const id = `${i}-${j}`
    level1Data.push({
      id,
      name: `员工${id}`,
      city: 'BJ'
    })
  }
  const id = `${i}`
  treeData.push({
    id,
    name: `员工${id}`,
    city: 'BJ',
    children: level1Data
  })
}

const service = () => {
  return new Promise<any[]>((resolve) => {
    setTimeout(() => {
      resolve(treeData)
    }, 100)
  })
}

树状表格组件效果如下：

大数据树状表格组件

将前面大数据表格组件与树状表格组件的实现方式合并起来，就能实现大数据树状表格组件。

tsx 复制代码 
// /components/hook/useTreeVirtualScroll.ts
import { Ref, computed, ref } from 'vue'
import { TableProps } from '../type'

export default function useTreeVirtualScroll(
  props: TableProps,
  headerRef: Ref<HTMLElement | null>
) {
  const expandedRowKeys = ref<string[]>([])
  // 实际渲染数据的起始索引
  const startIndex = ref(0)

  // 判断节点是否展开
  const isExpanded = (key: string) => {
    return expandedRowKeys.value.includes(key)
  }

  // 切换节点展开状态
  const toggleExpand = (key: string) => {
    const index = expandedRowKeys.value.findIndex((item) => item === key)
    index >= 0
      ? expandedRowKeys.value.splice(index, 1)
      : expandedRowKeys.value.push(key)
  }

  // 遍历树
  const walkTree = (data: any[], walkData: any[], level = 0) => {
    for (let item of walkData) {
      data.push({
        ...item,
        level
      })
      if (isExpanded(item.id) && item.children) {
        walkTree(data, item.children, level + 1)
      }
    }
  }

  // 全部展开数据
  const allTableData = computed(() => {
    const data: any[] = []
    const { dataSource } = props
    walkTree(data, dataSource)
    return data
  })

  // 表格实际可展示的数据条数
  const count = computed(() => {
    const { cellHeight, scrollY } = props
    const headerHeight = headerRef.value ? headerRef.value.clientHeight : 0
    return Math.ceil((scrollY - headerHeight) / cellHeight)
  })

  // 实际渲染数据
  const tableData = computed(() => {
    const data = allTableData.value
    const start = startIndex.value
    const end = Math.min(start + count.value, data.length)
    return data.slice(start, end)
  })

  // 滚动监听事件
  const onScroll = (e: Event) => {
    const { scrollTop, scrollHeight } = e.target as HTMLElement
    startIndex.value = Math.floor(
      (scrollTop / scrollHeight) * allTableData.value.length
    )
  }

  return {
    isExpanded,
    toggleExpand,
    startIndex,
    count,
    tableData,
    allTableData,
    onScroll
  }
}

// /components/ScrollTreeTable
import { defineComponent } from 'vue'
import { tableProps } from './type'
import useTableHeader from './hook/useTableHeader'
import useTreeVirtualScroll from './hook/useTreeVirtualScroll'

export default defineComponent({
  name: 'ScrollTreeTable',
  props: tableProps,
  setup(props) {
    const { tableHeaders, headerRef } = useTableHeader(props)
    const {
      isExpanded,
      toggleExpand,
      startIndex,
      count,
      tableData,
      allTableData,
      onScroll
    } = useTreeVirtualScroll(props, headerRef)
    /* render 函数 */
    return () => {
      const { columns, cellHeight, scrollY } = props
      const bottomHeight = `${
        (allTableData.value.length - startIndex.value - count.value) *
        cellHeight
      }px`
      return (
        <div
          style={{ height: `${scrollY}px`, overflowY: 'auto' }}
          onScroll={onScroll}>
          <table class="table">
            <thead>
              <tr>
                {tableHeaders.value.map((header) => (
                  <th>{header}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              <div style={{ height: `${startIndex.value * cellHeight}px` }} />
              {tableData.value.map((item, index) => (
                <tr key={item.id}>
                  {columns.map((column, columnIndex) => {
                    const { customRender, key } = column
                    const { id, level = 0 } = item
                    return (
                      <td>
                        <span
                          style={{
                            marginLeft: `${level * 20}px`,
                            marginRight: '5px'
                          }}>
                          {columnIndex === 0 && item.children && (
                            <button
                              class="btn btn-light btn-sm"
                              onClick={() => toggleExpand(id)}>
                              {isExpanded(id) ? '-' : '+'}
                            </button>
                          )}
                        </span>
                        {customRender
                          ? customRender({
                              text: item[key]?.toString(),
                              record: item,
                              index,
                              column
                            })
                          : item[key]}
                      </td>
                    )
                  })}
                </tr>
              ))}
              <div
                style={{
                  height: bottomHeight
                }}
              />
            </tbody>
          </table>
        </div>
      )
    }
  }
})

与普通树状表格组件相比，大数据树状表格遍历树得到的不是最终实际渲染的数据，而是全部展开的节点数据，再根据 startIndex 从中截取相应的部分来作为最终实际渲染的数据。

在页面中引入大数据树状表格，并将数据量增加到 40万 条：

tsx 复制代码 
// App.tsx
import Table from './components/ScrollTreeTable'

const treeData: any[] = []
for (let i = 0; i < 4; ++i) {
  const level1Data: any[] = []
  for (let j = 0; j < 100000; ++j) {
    const id = `${i}-${j}`
    level1Data.push({
      id,
      name: `员工${id}`,
      city: 'BJ'
    })
  }
  const id = `${i}`
  treeData.push({
    id,
    name: `员工${id}`,
    city: 'BJ',
    children: level1Data
  })
}

滚动依旧是丝滑流畅：

进一步优化

从效果图可以看出，滚动性能是足够了，但是点击展开按钮时，明显有半秒左右的卡顿时间。分析展开时卡顿的原因，主要在于遍历一棵几十万节点的大树所耗费的时间太多。

优化思路是从减少遍历大树次数的方向来进行优化，可以只在初始化的时候遍历大树确定全部被展开的数据节点（allTableData）。后续点击展开/折叠按钮时，只在这个数据集中插入或删除部分节点即可。展开节点时，将其所有子节点加入到数据集中，折叠节点时，找到下一个与进行折叠操作的节点相同层级的节点，删除其中间的全部节点。另一个需要解决的问题是，当展开某个节点时，其部分子孙节点可能处于展开状态，如果递归遍历其子孙节点，在展开节点层级较浅时，仍需要大量时间。如果不递归遍历，仅将其子节点加入数据集中，那就需要在进行折叠操作时，将展开节点数组（expandedRowKeys）中属于该节点的子孙节点的节点全部删除，要高效地进行该操作，就需要后端数据提供每个节点的PIDS属性（即该节点所有祖先节点的ID，一般是以逗号连接的字符串），且在节点展开时，保存其PIDS属性，这样才能快速从展开节点数组中高效找到某节点的全部子孙节点。

相关推荐
aPurpleBerry13 分钟前
JS常用数组方法 reduce filter find forEach
javascript
GIS程序媛—椰子42 分钟前
【Vue 全家桶】7、Vue UI组件库（更新中）
前端·vue.js
DogEgg_0011 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端1 小时前
Content Security Policy (CSP)
前端·javascript·面试
乐闻x1 小时前
ESLint 使用教程（一）：从零配置 ESLint
javascript·eslint
木舟10091 小时前
ffmpeg重复回听音频流，时长叠加问题
前端
王大锤43911 小时前
golang通用后台管理系统07（后台与若依前端对接）
开发语言·前端·golang
我血条子呢1 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
黎金安2 小时前
前端第二次作业
前端·css·css3
啦啦右一2 小时前
前端 | MYTED单篇TED词汇学习功能优化
前端·学习
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解