If the table columns are all of fixed width and have fixed columns, an extra column may appear #4400
Description
- I have searched the issues of this repository and believe that this is not a duplicate.
Version
2.2.2
Environment
windows, chrome, vue3.1.3
Reproduction link
https://github.com/hcg1023/antdv-bug
Steps to reproduce
<template>
<a-table
bordered
:data-source="[{}, {}]"
:columns="columns"
:scroll="{
x: columns.length * 160,
y: false
}"
>
</a-table>
</template>
<script>
export default {
name: "App",
components: {},
setup() {
const columns = [
{
title: "Full Name",
width: "100px",
dataIndex: "name",
key: "name",
fixed: "left"
},
{
title: "Age",
width: "80px",
dataIndex: "age",
key: "age"
},
{ title: "Column 1", dataIndex: "address", key: "1" },
{ title: "Column 2", width: "80px", dataIndex: "address", key: "2" },
{ title: "Column 3", width: "80px", dataIndex: "address", key: "3" },
{ title: "Column 4", width: "80px", dataIndex: "address", key: "4" },
{ title: "Column 5", width: "80px", dataIndex: "address", key: "5" },
{ title: "Column 6", width: "80px", dataIndex: "address", key: "6" },
{ title: "Column 7", width: "80px", dataIndex: "address", key: "7" },
{ title: "Column 8", width: "80px", dataIndex: "address", key: "8" },
{
title: "Action",
key: "operation",
fixed: "right",
width: 100
}
];
return {
columns
};
}
};
</script>
What is expected?
Render normal
What is actually happening?
Rendering errors