【小技巧】Vue3中不同页勾选【批量删除】

bug收集：专门解决与收集bug的网站

网址：www.bugshouji.com

大家好！

今天给大家分享一个超级干货（使用简单，但是功能却很强大）。

下面，我们就来看看到底是什么小技巧呢？

描述

批量删除功能，相信大家基本都做过。但是，几乎都是实现的当前页勾选后，批量删除。如果，有用户需要实现不同页勾选后批量删除；因相对比较麻烦，拒绝实现它的情况比较多。

（ 我通常会用各大邮箱为例, 如：网易邮箱 ，QQ邮箱等，它们的批量删除都是不支持不同页的勾选，再批量删除的。我也不知道为啥，它们不支持不同页勾选。我觉得可能还是怕用户误删除了吧。）

然而，今天朋友（刘不胖）分享了在Vue3中，超级简单的就可以使用这个需求（不同页勾选，进行批量删除）的方法。

我也是很惊讶，用了vue这么久，今天才知道这个小技巧。

开心，以后不用和用户去争了，他想做成啥样，就给他做成啥样。

实现案例

只需要设置两个属性：row-key 与 reserve-selection 即可

如图：

官方文档说明

row-key属性:

行数据的Key，用来优化Table的渲染; 在使用reserve-selection功能与显示树形数据时，该属性是必填的。类型可以是function/string

如图：

reserve-selection属性：

数据刷新后是否保留选项，仅对type=selection的列有效,请注意,需指定row-key来让这个功能生效。默认值为false. 要使用此功能需要将值设为true.

如图：

简单吧，哈哈，又了解一个小技巧。