西安官网制作湖南优化公司

概要

在vue项目中，有时候需要渲染大量的动态列，在我的项目中当我的列达到150个以上时，出现了列错乱问题，以下是我的示例截图

查看官网渲染大数据时使用虚拟滚动

横向虚拟滚动
通过 scroll-x.enabled 与 scroll-x.gt 组合开启，其中 enabled 为总开关，gt 是指当总列数大于指定列数时自动开启。
理论上限：横向平均上限支持 8w 列（最大上限 20w 列）。当 gt 为 0 时为总是启用。
性能优化：横向虚拟滚动列宽越宽越流畅，列宽设置 column.width | column.min-width
小提示
启用横向虚拟滚动，建议开启 show-header-overflow 和 show-footer-overflow 获得最高渲染性能

按照官网设置之后，数据量大时依旧错乱，升级版本等各种方法使用之后还是不行

解决方案

requestAnimationFrame
requestAnimationFrame是浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是按帧对网页进行重绘，让各种网页动画效果（DOM动画、Canvas动画、SVG动画、WebGL动画）能够有一个统一的刷新机制，从而节省系统资源，提高系统性能，改善视觉效果。

在运行过程中，window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行

这个是在之前做动画的时候用过，抱着试试的心态，我修改了一下我的代码发现可以！

小结

当使用vxe-table 遇到大数据渲染错乱时，其他方案都不行时，可以试一下requestAnimationFrame

源码

<template><div class="app-container"><a-space style="margin-bottom: 10px"><a-range-picker v-model:value="dates" /><a-button type="primary" @click="onSearch">查询</a-button></a-space><vxe-table:data="tableData":height="800"v-loading="loading"bordershow-overflowshow-header-overflowshow-footer-overflow:scroll-x="{ enabled: true, gt: 0 }"><vxe-columntitle="名称"field="name"width="100"fixed="left"></vxe-column><vxe-columntitle="编码"field="code"width="100"fixed="left"></vxe-column><vxe-columntitle="数量"field="count"width="100"fixed="left"></vxe-column><vxe-columnv-for="item in columns":key="item.field":field="item.field":title="item.title":min-width="item.minWidth"></vxe-column></vxe-table></div>
</template>
<script setup>
import dayjs from 'dayjs'const dates = ref([])
const tableData = ref([])
const loading = ref(false)
const columns = ref([])const onSearch = () => {loading.value = truesetTimeout(() => {requestAnimationFrame(() => {columns.value = getColums()})tableData.value = getData()loading.value = false}, 1000)
}const getColums = () => {if (!dates || dates.value.length === 0) {return []}const [start, end] = dates.valueconst diff = dayjs(end).diff(dayjs(start), 'day')const columns = []for (let i = 0; i <= diff; i++) {const date = dayjs(start).add(i, 'day').format('YYYY-MM-DD')columns.push({field: date,title: date,minWidth: 100})}return columns
}const getData = () => {const columns = getColums()if (!columns || columns.length === 0) {return []}const data = []for (let i = 0; i < 100; i++) {const row = {name: `name${i}`,code: `code${i}`,count: i}for (const col of columns) {row[col.field] = Math.floor(Math.random() * 100)}data.push(row)}return data
}
</script><style scoped lang="scss">
.app-container {padding: 10px;
}
</style>