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

OK,收工!如果可以实现记得点赞分享,谢谢老铁~

  • 12
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端加油站

你遇到的坑将由我来踩

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值