【element ui】翻页记忆功能、多选时执行删除操作,刷新表格问题
目录
- 一、element ui 让表格翻页选中仍然有记忆功能
- 二、element+vue 表格多选时执行删除操作,刷新表格问题
- 🚀写在最后
一、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 表格多选时执行删除操作,刷新表格问题
🚀写在最后
希望我的分享能够帮助到更多的人,如果觉得我的分享有帮助的话,请大家一键三连支持一下哦~
❤️原创不易,期待你的关注与支持~
点赞👍+收藏⭐️+评论✍️
😊之后我会继续更新前端学习小知识,关注我不迷路~