Table组件dataSource属性当一页的数据量200左右，滚动table会出现[Vue warn]: Unhandled error during execution of watcher callback

[LinzhouWang]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

4.1.0

Environment

os version:Windows 11 教育版64位，browser version:Microsoft Edge 122.0.2365.92 (正式版本) (64 位), Vue version:vue@3.4.21

Reproduction link

https://www.antdv.com/components/table

Steps to reproduce

1.引入vue@3.4.21，ant-design-vue@4.1.0，使用table组件；
2.设置table的scroll="{ x: 1500, y: 300 }"，columns="columns", dataSource="data", pagination="false";
3.在data中设置：
columns ： [
{
title: 'Full Name',
width: 100,
dataIndex: 'name',
key: 'name',
fixed: 'left',
},
{
title: 'Age',
width: 100,
dataIndex: 'age',
key: 'age',
fixed: 'left',
},
{
title: 'Address',
dataIndex: 'address',
key: '1',
width: 150,
}],
data:[],
4.在mounted中给data赋值:
for (let i = 0; i < 200; i ) {
this.data.push({
key: i,
name: Edrward ${i},
age: 32,
address: London Park no. ${i},
});
}
5.上下滑动table的滚动条，多滑动几次就会出现[Vue warn]: Unhandled error during execution of watcher callback
at <Cell cellType="body" class=undefined ellipsis=undefined ... > ...

What is expected?

数据加载后，table表格能根据滚动条进行正常滑动

What is actually happening?

在用滚动条进行上下、左右滑动的时候，F12查看控制台出现：[Vue warn]: Unhandled error during execution of watcher callback
at <Cell cellType="body" class=undefined ellipsis=undefined ... > at <BodyRow key=353 rowKey=353 record= {key: 353, name: 'Edrward 353', age: 32, address: 'London Park no. 353'} ... >
at <TableBody data= ...

[qppq54s]

我在codesandbox上尝试了下，没有复现。但是因为for (let i = 0; i < 200; i ) 这句导致了infinite loop。改成 for (let i = 0; i < 200; i++) 就好了

[LinzhouWang]

首先感谢，您帮忙中的帮助和回复，我issue上是手写的估计没写成i++，源代码如下： &nbsp; selfimpr ***@***.*** &nbsp;

…

------------------&nbsp;原始邮件&nbsp;------------------ 发件人: ***@***.***&gt;; 发送时间: 2024年3月28日(星期四) 上午9:12 收件人: ***@***.***&gt;; 抄送: ***@***.***&gt;; ***@***.***&gt;; 主题: Re: [vueComponent/ant-design-vue] Table组件dataSource属性当一页的数据量200左右，滚动table会出现[Vue warn]: Unhandled error during execution of watcher callback (Issue #7457) 我在codesandbox上尝试了下，没有复现。但是因为for (let i = 0; i < 200; i ) 这句导致了infinite loop。改成 for (let i = 0; i < 200; i++) 就好了 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: ***@***.***&gt;

[xiaogang12131]

@LinzhouWang 改成i++，也会有警告，还会导致栈溢出报错，这个解决了吗

[LinzhouWang]

@LinzhouWang 改成i++，也会有警告，还会导致栈溢出报错，这个解决了吗
没有，他这个table组件应该有bug，改成原始的table了

[kingofu2y]

噢，我也遇到了，烦死了，应该有bug。

[yaokaibao-tre]

@tangjinzhou
你好，上面反映的这个问题，vue版本3.4.x会出现，3.3.x是没问题的，后续可以解决一下么？

[yangfan0909]

@yaokaibao-tre 你改成3.3.x 哪个版本，我试了好几个3的版本都不行

[yaokaibao-tre]

@yaokaibao-tre 你改成3.3.x 哪个版本，我试了好几个3的版本都不行

我用的3.3.4

[yangfan0909]

非常感谢，我昨天忘了把 "^"这个去掉了！

…

------------------&nbsp;原始邮件&nbsp;------------------ 发件人: "vueComponent/ant-design-vue" ***@***.***&gt;; 发送时间:&nbsp;2024年5月23日(星期四) 上午8:41 ***@***.***&gt;; ***@***.******@***.***&gt;; 主题:&nbsp;Re: [vueComponent/ant-design-vue] Table组件dataSource属性当一页的数据量200左右，滚动table会出现[Vue warn]: Unhandled error during execution of watcher callback (Issue #7457) @yaokaibao-tre 你改成3.3.x 哪个版本，我试了好几个3的版本都不行 我用的3.3.4 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: ***@***.***&gt;

[JToung]

4.1.0版本也会有这个bug

[WHYXman]

4.2.3也有这个bug

[helloword107]

最新的版本4.2.3也是这样，设置一页显示100条的时候，滚动滚动条，控制台就会显示这个警告，而且会卡死

[orionna319]

I looked at the Vue official library and found that it might be caused by the change of computed logic after version 3.4. There are two solutions: one is to lower the Vue version, and the other is to use computed instead of eagerComputed, It works for me.

1. Use computed instead of eagerComputed
2. Lower the Vue version to 3.3.4

Before this, computed was used. I found that eagerComputed was written in this commit. Since there is no comment and no PR discussion, I don't know why it was changed to eagerComputed.

[github-actions]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days

[hezi98]

最新的版本4.2.3也是这样，设置一页显示100条的时候，滚动滚动条，控制台就会显示这个警告，而且会卡死

准确的说是当鼠标一直滚动到最底部，然后再往下滚动，鼠标位置超出table表格数据区域时，就会出现该问题

[HughSunny]

问题解决了吗?

[hezi98]

问题解决了吗?

解决了，重新封装了个elementplus的table组件来用，哈哈哈