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.
如图:
简单吧,哈哈,又了解一个小技巧。