Skip to content

单元格宽度autoWidth,表头有maxWidth,minWidth,大数据量渲染性能问题 #5154

@Wangyouth

Description

@Wangyouth

What problem does this feature solve?

配置widthMode: 'autoWidth', heightMode: 'autoHeight', 表头数据columns每项包含minWidth: xxx, maxWidth: xxx,

问题:大数据量渲染很慢,
环境: win 8G内存
实际测试: 十万数据 渲染在八秒左右(总单元格数据十万,行列数不定)

如果是width设置固定宽度,渲染在1.6秒左右

const tableOptions = ref({
   
    rowSeriesNumber: {
        width: 'auto',
        title: '行号',
        headerStyle: {
            bgColor: '#1890ff',
            color: '#fff',
            autoWrapText: true
        }
    },
    widthMode: 'autoWidth',
    heightMode: 'autoHeight',
    frozenColCount: 1,
    autoWrapText: true,
    rowHeight: 40, 
    columns: [
        {
            field: '0',
            minWidth: 120, 
            maxWidth: 500,
            title: '姓名',
        },
        {
            field: '1',
            minWidth: 200,
            maxWidth: 500,
            title: '年龄',
        },
        {
            field: '2',
            minWidth: 137,
            maxWidth: 500,
            title: '性别',
        },
        {
            field: '3',
            minWidth: 203,
            maxWidth: 500,
            title: '手机号',
        },
    ], 
    records: [],
});

上述配置实际效果图
图1

Image

图2

Image

What does the proposed API look like?

添加配置,或添加只渲染可视区域配置,加快渲染速度

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions