坚果大叔 坚果大叔
  • 首页
  • 闲言碎语
  • 技术
  • 生活
  • 记录
  • 朋友
  • 热点新闻
  • 常用代码
  • 工具箱
  • 关于
首页 › 技术 › AntDesign Table Radio点击死循环导致页面卡死

AntDesign Table Radio点击死循环导致页面卡死

坚果大叔
2024-07-23 17:19:27技术阅读 2,492

AntDesign Table Radio点击死循环导致页面卡死-坚果大叔

前提

在开发过程中使用 vben 的 BasicTable组件进行页面功能实现,因设计需求页面在 table 中需要每行可点击从而显示对应的图标数据。所以需要给 table 中每行加上单选按钮。BasicTable设置如下,只要加上rowSelection即可。另外自带的点击事件为 @row-click="handleRowClick",但是这个点击事件只能点击表格主体而 radio 点击竟然没有效果。所以现在也要给 radio 加上点击事件。

出现问题

给 radio 加上点击事件不是很快嘛!直接在rowSelection中加上onChange即可。一顿操作猛如虎,运行后傻眼了。页面直接卡死崩溃了。



const handleRowSelectionChange = (keys) => {
    const data = cloneDeep(fitTabeleData.value[keys[0] - 1]);
    single_loop_capacity.value = data.image;
    checkedKeys.value = [data.id];
};

功能很简单,就是点击当前行,然后根据index 获取数据,然后显示就好了。这里有个checkedKeys的赋值直接导致页面卡死。

解决问题

一开始想是页面更新问题,或者频繁点击的问题。那就给checkedKeys的赋值加上 nextTick并且给handleRowSelectionChange加上防抖。

  const handleRowSelectionChange = debounce(([selectedKey]) => {
    const selectedRow = fitTabeleData.value.find((row) => row.id === selectedKey) || {};
    single_loop_capacity.value = selectedRow.image;
    nextTick(() => {
      checkedKeys.value = [selectedRow.id];
    });
  }, 100);

修改完之后有满怀信心的试了一下。不出所料,还是不行。没关系,上大招。那就判断一下当前选中的行 ID 是否已经存在于 checkedKeys.value 中。如果已经存在,那么就不需要再次更新 checkedKeys.value,从而避免触发不必要的重新渲染和可能的死循环。我不信这样还解决不了你!

const handleRowSelectionChange = debounce(([selectedKey]) => {
    const selectedRow = fitTabeleData.value.find((row) => row.id === selectedKey) || {};
    single_loop_capacity.value = selectedRow.image;
    nextTick(() => {
      if (checkedKeys.value[0] !== selectedRow.id) {
       这一步是为了避免不必要的更新和重新渲染。具体来说,这个条件判断语句的作用是检查
        checkedKeys.value = [selectedRow.id];
      }
    });
}, 100);

问题所在

其实就是checkedKeys.value中已经存在了id,但是还是修改了它的值。就导致触发了echats dom的渲染更新。而且因为渲染 echarts的数据比较大,所以页面承受不住就卡死了。

赞赏 赞(0)
老家的桃树和梨树
上一篇
做胃镜!
下一篇
在小程序中查看
搜你想看的
聚合文章
是过年呀
最近
重学JavaScript之基本概念(中) => 操作符
如何实现深拷贝?
闲言碎语
Memos
npm install 出现 Error:EISDIR:illegal operation on a directory 的错误提示!
2025-03-31 19:02:11
559 0 0
iphone 利用 Scriptable 添加网上国网电费小组件
2025-01-06 20:40:20
4,996 6 2
在博客中加上memos记录展示。
2024-12-25 23:41:27
2,329 5 2
网页点击平滑滚动效果~
2024-10-17 16:43:08
2,033 4
  • 0
博主

一位佛系的前端开发者,略通摄影,乐于尝试新事物,热衷于美食。

友链
故事胶片
公众号
坚果大叔 执行上下文 卖坚果的怪叔叔 Dacking
Copyright © 2017-2025 坚果大叔

开往-友链接力

萌ICP备20230818号

苏ICP备18048410号-3
  • 首页
  • 闲言碎语
  • 技术
  • 生活
  • 记录
  • 朋友
  • 热点新闻
  • 常用代码
  • 工具箱
  • 关于
# CSS # # JavaScript # # vue # # 微信 # # 生活 #
坚果大叔
317
文章
125
评论
365
喜欢