企业网站建设与实施调查报告,seo优化常识,软件开发哪里学,做的好的微信商城网站如果可以实现记得点赞分享#xff0c;谢谢老铁#xff5e;
1.场景描述
发起请求获取上万条数据#xff0c;进行表格渲染#xff0c;使浏览器卡顿#xff0c;导致网页崩溃。
2.分析原因
1.大量数据加载#xff0c;过多操作Dom#xff0c;消耗性能。 2.表格中包含其他…如果可以实现记得点赞分享谢谢老铁
1.场景描述
发起请求获取上万条数据进行表格渲染使浏览器卡顿导致网页崩溃。
2.分析原因
1.大量数据加载过多操作Dom消耗性能。 2.表格中包含其他控件增加渲染负担。
3.解决思路
将表格中的控件提取为子组件因为vue中的render是独立渲染的。 table中的单个控件 const columns: ColumnsTypeany [{title: 经度,dataIndex: lon,align: center,render: (value, record) (InputNumberCon value{value} blurEvent{onBlur} typelon/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 (divInputNumberdefaultValue{value}onBlur{(e) blurEvent blurEvent(e, record, type)}controls{false}//div);
}export default InputNumberCon;2.采用分页的方式将大数据进行分批渲染处理。
TablesizesmallidsortTableclassNamesortTableBoxpagination{{defaultPageSize: pageSize,position: [bottomLeft],current,onChange: changePage}}dataSource{dataSource}columns{columns}rowKeyindexscroll{{ 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-overflowshow-header-overflowshow-footer-overflow 参数将根据不同场景各自触发生效无法取消如果需要支持需将虚拟滚动关闭 性能优化横向虚拟滚动由列宽决定性能每一列的列宽越大就越流畅纵向虚拟滚动由行高决定性能每一行的高度越高就越流畅 v4.5默认关闭虚拟滚动需手动 enabled 开启或者 setup 全局开启 OK收工如果可以实现记得点赞分享谢谢老铁
