vue 解决响应大数据表格渲染崩溃问题

news2024/10/5 21:18:24

如果可以实现记得点赞分享，谢谢老铁～

1.场景描述

发起请求获取上万条数据，进行表格渲染，使浏览器卡顿，导致网页崩溃。
在这里插入图片描述

2.分析原因

1.大量数据加载，过多操作Dom，消耗性能。
2.表格中包含其他控件，增加渲染负担。

3.解决思路

将表格中的控件提取为子组件，因为vue中的render是独立渲染的。
table中的单个控件

  const columns: ColumnsType<any> = [
    {
      title: "经度",
      dataIndex: "lon",
      align: "center",
      render: (value, record) => (
        <InputNumberCon value={value} blurEvent={onBlur} type="lon"></InputNumberCon>
      ),
    },
  ]

2.InputNumberCon子组件

import React from 'react';
import {
    InputNumber,
} from "antd";


interface Props {
    type: string;
    value: number | null;
    blurEvent: (event: any, data: any, type: string) => void;
}
function InputNumberCon({ value, type, blurEvent }: Props) {
    return (
        <div>
            <InputNumber
                defaultValue={value}
                onBlur={(e) => blurEvent && blurEvent(e, record, type)}
                controls={false}
            />
        </div>
    );
}

export default InputNumberCon;

2.采用分页的方式将大数据进行分批渲染处理。

<Table
        size="small"
        id="sortTable"
        className="sortTableBox"
        pagination={{
          defaultPageSize: pageSize,
          position: ["bottomLeft"],
          current,
          onChange: changePage
        }}
        dataSource={dataSource}
        columns={columns}
        rowKey="index"
        scroll={{ y: '180px', scrollToFirstRowOnChange: true }}
        components={{
          body: {
            wrapper: DraggableContainer,
            row: DraggableBodyRow,
          },
        }}
      />

3.如以上两种还无法满足，请更换解决方案，采用虚拟高度处理，代表组件是vux-table

安装:官网

【1】安装依赖
npm install xe-utils vxe-table

【2】看官网例子即可

PS：虚拟滚动（最大可以支撑 10w 列、30w 行）
高性能的虚拟渲染，设置 scroll-x={ enabled, gt } | scroll-y={ enabled, gt } 和 height、max-height 来开启虚拟滚动，会根据触发规则 gt 来启用虚拟渲染。虚拟滚动启用后只会渲染指定范围内的可视区数据，其他的数据将被卷去收起，当滚动到可视区时才被渲染出来
（注：启用虚拟滚动后：show-overflow，show-header-overflow，show-footer-overflow 参数将根据不同场景各自触发生效，无法取消；如果需要支持，需将虚拟滚动关闭）
（性能优化：横向虚拟滚动由列宽决定性能，每一列的列宽越大就越流畅；纵向虚拟滚动由行高决定性能，每一行的高度越高就越流畅）
v4.5+默认关闭虚拟滚动，需手动 enabled 开启或者 setup 全局开启