左侧固定fixed，中间某列width：auto 数据80条，且有x轴滚动条，固定列首次渲染会向上留白，卡顿一下

[luoye111]

<div :style="{width:'400px'}"> <vxe-table border :column-config="{ useKey: true }" :row-config="{ useKey: true }" :data="tableData" > <vxe-column type="seq" width="60" fixed="left"></vxe-column> <vxe-column field="name" title="Name" fixed="left" width="auto" sortable type="html" ></vxe-column> <vxe-column field="age" title="age" width="100" sortable type="html" ></vxe-column> <vxe-column field="sex" width="100" title="sex" sortable type="html" ></vxe-column> <vxe-column field="describeHtml" title="<span class=red>HTML 标签与筛选</span>" type="html" width="100" ></vxe-column> <vxe-column field="role" width="100" type="html" title="<span class=green>HTML 标签与格式化</span>" :formatter="formatRole" ></vxe-column> </vxe-table>
data() { return { tableData: [], htmlOptions: [ { label: "包含 aa", value: "aa" }, { label: "包含 bb", value: "bb" }, ], }; }, methods: { formatRole({ cellValue }) { return23434343434323423423424234234; }, filterDescribeMethod({ value, row }) { return row.describeHtml.indexOf(value) > -1; }, getData() { let data = []; for (let i = 0; i <= 80; i++) { data.push({ name: "xx1", age: "南", sex: "23232323", describe: "字母 aa -1", describeHtml: '<span style="color: red">字母 <span style="color: blue">aa</span> -1</span>', role: "oo1", }); } this.tableData = data; } }, created() { this.getData(0); }

20241210-104304.mp4

[xuliangzhan]

#2740