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

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

1.场景描述

发起请求获取上万条数据，进行表格渲染，使浏览器卡顿，导致网页崩溃。

2.分析原因

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

3.解决思路

1. 将表格中的控件提取为子组件，因为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><InputNumberdefaultValue={value}onBlur={(e) => blurEvent && blurEvent(e, record, type)}controls={false}/></div>);
}export default InputNumberCon;

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

<Tablesize="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 全局开启

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