ant a-table树形表格广量数据展开（expand）较慢卡顿性能优化

ant a-table树形表格广量数据展开较慢性能优化

基础框架：ui: ant design, tech: Vue
树节点： 2000-2500节点
需求：ant树形表格展开收缩渲染速度较慢，约为6-7s，处理性能优化

1.查看初始化表格结构判断操作栏是否存在大量需要优化的template slot插槽 (优化节省3s）

<a-table :columns="initColumns"
                   :scroll="{x: 1200}"
                   :pagination="false"
                   :dataSource="tableData.list"
                   :locale="{emptyText: '暂无数据'}"
                   rowKey="id"
                   :expandedRowKeys="expandedRowKeys"
                   size="middle"
                   @expand="expand">
            <template slot="action"
                      slot-scope="text,record">
              <!--此处省略多处不可描述的template render....-->
    		</template>
           
</a-table>

考虑是否存在可能需要大量遍历的通用method，有则集中处理，移至created/mounted生命周期或filters处理

本例存在row每次渲染时存在获取按钮权限方法重复执行（如图）

2.判断当前渲染方式（优化节省2s）

是否为以下方式:

1. 未使用自定义expandedRowKeys方法透传ant组件，利用ant组件原生方式处理展开
2. 使用:expandedRowKeys.sync="expandedRowKeys"+ @expand方式进行自定义展开

第一种方式：

建议进行chorme控制台performance性能record判断，根据当前响应时间大的进行优化，或建议使用树结构按需加载的方式进行优化

第二种方式：

• 查看expand内部方法是否存在需要优化的地方

本例:

// 害 欲说还休 ┭┮﹏┭┮

以下为优化后的code：

expand(expanded, record) {
    if (!expanded) {
        this.expandedRowKeys = this.expandedRowKeys.filter((o) => record.id !== o)
    } else {
        this.expandedRowKeys.push(record.id)
    }
},

感谢查看至此的小伙伴们，TKS! 你以为到这里就结束了啦，no 好戏才刚刚开始~~0.0

3.！important 重点 (优化节省至ms级别)

请review相关代码，查看是否存在定制mouseover，hover等事件，是否存在动态改变columns配置的操作，这样会导致整个table重新渲染。如果存在fiexd的列，就会重新渲染计算每行行高，计算行高会引发重排导致页面异常卡顿

结果: