家政保洁公司网站建设方案武汉seo网站推广

一、element ui 让表格翻页选中仍然有记忆功能

问题描述：

下面描述实现的步骤和代码

第一步：给表格添加 row-key

关键点：:row-key="(val) => val.id"

第二步：给多选框加默认选中功能

关键点：:reserve-selection="true"

切换分页持久化选中表格，其实关键代码就这2行

val是获取的数据，该数据中有个唯一值id可以使其一一对应控制要展开的行

参考文章：如何让ElementUi的多选框表格,翻页选中有记忆功能保持默认选中教程(elementui表格复选框)
参考文章：上面这种方法在只能记录一次表格的选中情况，如果涉及到多个地方使用了上述相同的表格组件，而每个表格的选中情况不相同，则上述方法不再适合：
解决方法：在获取表格数据的时候，使用组件提供的 toggleRowSelection 方法，切换某一行的选中状态，进行多选框的回显，此方法也可实现切换分页时的回显，需要注意的是 使用 toggleRowSelection 方法 必须使用绑定table的原有数据，不可使用传入的参数，否则方法会无效

二、element+vue 表格多选时执行删除操作，刷新表格问题

问题描述：当table执行多选时，走后台执行删除操作之后，再次选择之后就会加上之前删除的数据，并没有清空

解决办法：
第一步：用ref绑定表格：
第二步：在执行ajax之后：清除复选框，并清除对应的数组。

参考文章：element+vue 表格多选时执行删除操作，刷新表格问题

🚀写在最后

希望我的分享能够帮助到更多的人，如果觉得我的分享有帮助的话，请大家一键三连支持一下哦~
❤️原创不易，期待你的关注与支持~
点赞👍+收藏⭐️+评论✍️
😊之后我会继续更新前端学习小知识，关注我不迷路~