The table component bodyCell slot has been redrawing the problem #5453
Description
- I have searched the issues of this repository and believe that this is not a duplicate.
Version
3.1.0
Environment
正常环境
Reproduction link
https://www.antdv.com/components/table-cn#Table
Steps to reproduce
代码如下
<template>
<a-table :dataSource="dataSource" :loading="loading" :columns="columns" :pagination="pagination">
<template #bodyCell="{ column, record }">
<template v-if="column.dataIndex === 't1'">
<a :class="a1()">t1</a>
</template>
<template v-if="column.dataIndex === 't2'">
<a>t2</a>
</template>
</template>
</a-table>
</template>
<script>
import { defineComponent, ref, onMounted } from "vue";
import { Table } from "ant-design-vue";
export default defineComponent({
components: { ATable: Table, },
setup() {
const dataSource = ref([]),
loading = ref(false),
columns = ref([
{ title: "操作", dataIndex: "t1", fixed: 'left' },
{ title: "姓名", dataIndex: "name", },
{ title: "年龄", dataIndex: "age", },
{ title: "住址", dataIndex: "address", },
{ title: "住址1", dataIndex: "address1", },
{ title: "操作", dataIndex: "t2", fixed: 'right' },
]);
const getData = () => {
loading.value = true;
setTimeout(() => {
dataSource.value = [
{
key: "1",
name: "胡彦斌",
age: 32,
address1: "1号",
address: "西湖区湖底公园1号",
},
{
key: "2",
name: "胡彦祖",
age: 42,
address1: "2号",
address: "西湖区湖底公园1号",
},
]
loading.value = false;
}, 1000)
}, a1 = () => {
console.log('a1')
}
onMounted(getData)
return {
pagination: ref({
current: 1,
pageSize: 10,
total: 2,
}),
columns,
loading,
dataSource,
a1,
};
},
});
</script>
在渲染结果的ui界面有两行数据，当你鼠标移入数据行中
What is expected?
渲染完成后 鼠标移入、移出、表格内输入框的输入清空 会导致整个行重新渲染这应该是不合理的！如果不是重新渲染如何说明控制台a1是怎么被调用的？
What is actually happening?
鼠标来回移动第一行和第二行 浏览器控制台疯狂打印 a1
在表格编辑的时候,输入值和清空值也有同样的打印
官方表格可编辑单元格可以拿来做测试
https://www.antdv.com/components/table-cn#components-table-demo-edit-row