Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The table component bodyCell slot has been redrawing the problem #5453

Closed
1 task
menkeydyvh opened this issue Apr 8, 2022 · 5 comments
Closed
1 task

The table component bodyCell slot has been redrawing the problem #5453

menkeydyvh opened this issue Apr 8, 2022 · 5 comments
Labels

Comments

@menkeydyvh
Copy link
Contributor

  • 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

@github-actions github-actions bot changed the title table组件 bodyCell 插槽一直重新绘制问题 The table component bodyCell slot has been redrawing the problem Apr 8, 2022
@mqhe2007
Copy link

mqhe2007 commented Apr 8, 2022

我和你遇到同样的问题,我以为这不是一个bug,所以我提交了一个新功能需求用来控制customRender方法只调用一次: #5454

@menkeydyvh
Copy link
Contributor Author

我和你遇到同样的问题,我以为这不是一个bug,所以我提交了一个新功能需求用来控制customRender方法只调用一次: #5454

这肯定是个bug 因为"ant-design-vue": "3.0.0-beta.13",这个版本我都没出现这个问题,后续我直接更新到最新就发现这个问题了

@tangjinzhou
Copy link
Member

做不到,不科学,也不合理

@tangjinzhou
Copy link
Member

只保证渲染结果,不保证渲染过程

@github-actions
Copy link

github-actions bot commented Apr 9, 2023

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Apr 9, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

3 participants