django element组件样式没有渲染_解析 Antd Table 组件的错位和性能问题

零. 开门见山的 Bug 解决方案

在做活动引擎的过程中，发现 Antd 的 Table 组件会发送各种行错位，和列错位。关于行错位不是本节内容介绍的重点，本文主要介绍在启用固定列的时候(即使用fixed) 时发生的列错位 bug 以及其衍生的一系列性能问题。

该写固定的 width，height 就写固定 width，height 。(修复简单，但这样 table 就不灵活，没法针对动态变化高度) 针对简单场景，可以用 setTimeout 在 mounted 之后触发下文的 syncFixedTableRowHeight。(缺点就是不稳定，可能还需要配套写检查资源加载的监听函数，但减少了出bug的概率) 使用 ResizerObserver 监听高度或宽度等属性变化，同步变化信息，方法见下文。(无缺点)

一. 复现 Bug

下图是使用固定列和 Image 作为列内容时产生的现象，该案例非常容易复现。

代码

import { Table } from 'antd';

const columns = [

{

title: 'Full Name',

width: 100,

dataIndex: 'name',

key: 'name',

fixed: 'left',

},

{

title: 'Age',

width: 100,

dataIndex: 'age',

key: 'age',

fixed: 'left',

},

{ title: 'Column 1', dataIndex: 'address', key: '1' },

{ title: 'Column 2', dataIndex: 'address', key: '2' },

{ title: 'Column 3', dataIndex: 'address', key: '3' },

{ title: 'Column 4', dataIndex: 'address', key: '4' },

{ title: 'Column 5', dataIndex: 'address', key: '5' },

{

title: 'Avatar',

width: 200,

dataIndex: 'img',

key: 'img',

render: (a, row ,b) => (

<img src={ row.img}>img>

)

},