el-table的样式错乱解决、支持跨页多选

噜噜咕噜噜

已于 2024-01-29 10:36:12 修改

阅读量747

点赞数 9

CC 4.0 BY-SA版权

文章标签： vue.js elementui javascript

于 2024-01-29 10:22:10 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/qq_43901960/article/details/135906191

本文介绍了在el-table中，如何通过添加key属性处理字段改变导致的行错乱问题，以及使用row-key和selection/reserve-selection属性来实现跨页勾选功能，同时提到了doLayout方法在元素显示/隐藏时的必要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题1: 当表格中的字段改变，经常会出现行错乱问题
解决方法：

 给el-table添加 key ( 但是需要记住跨页勾选，所以不使用此方法
 table 的 doLayout 方法 （ 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法

在这里插入图片描述

问题2: 支持跨页勾选
解决方法：

el-table 添加 row-key属性
el-table-column 添加  type="selection"  reserve-selection属性

在这里插入图片描述

噜噜咕噜噜

博客等级

码龄7年

14
原创

79
点赞

70
收藏

65
粉丝

关注

私信

热门文章

上一篇：: element Form表单校验el-upload上传组件

下一篇：: 解决火狐浏览器53.2.0版本前端兼容性问题

最新评论

git 常用命令
CSDN-Ada助手: CS入门技能树或许可以帮到你：https://edu.csdn.net/skill/gml?utm_source=AI_act_gml
ajax jquery 下载流文件
普通网友: 大佬高质量文章，图文并茂，逻辑清晰，受益匪浅，期待大佬新作。【我也写了一些相关领域的文章，希望能够得到博主的指导，共同进步！】
html 跟随鼠标移动画正方形
CSDN-Ada助手: 恭喜你在博客中成功实现了html跟随鼠标移动画正方形，这个效果看起来很酷！希望你能继续保持创作的热情，不断尝试新的想法和技术，让你的博客内容更加丰富多彩。或许下一步你可以尝试添加一些交互效果，让用户和画面可以有更多的互动。加油！期待你更多精彩的作品！ CSDN 正在通过评论红包奖励优秀博客，请看红包流：https://bbs.csdn.net/?type=4&header=0&utm_source=csdn_ai_ada_blog_reply3
css js ocr图文识别图片放大、缩小、旋转
CSDN-Ada助手: 恭喜您写了第三篇博客！标题中提到的CSS、JS和OCR图文识别以及图片的放大、缩小和旋转功能听起来非常有趣和实用。您对这些技术的深入探索和分享，无疑为读者提供了很多帮助和灵感。希望您能继续保持创作的热情和努力，为我们带来更多精彩的内容。在下一步的创作中，或许您可以考虑加入一些实例代码和演示，以及分享一些您在实践中遇到的挑战和解决方案。这样的内容将更具实用性，并能进一步帮助读者理解和应用这些技术。同时，也欢迎您探索其他与前端开发相关的主题，例如响应式设计、动画效果等，这将丰富您的创作领域，为读者带来更多启发。期待您接下来的博客！ CSDN 正在通过评论红包奖励优秀博客，请看红包流：https://bbs.csdn.net/?type=4&header=0&utm_source=csdn_ai_ada_blog_reply3

大家在看

最新文章

目录

展开全部

收起

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。