vue3:使用:批量删除功能

场景:vue中使用el-table,常需要记住上一页所勾选的数据,批量删除操作,或者弹窗分页勾选,进行第一页勾选,在调后端接口选择第二页勾选其他数据。

1、element-ui 的table表格可以轻松实现多选的功能,只要在表格列中增加type="selection"的一列即可。

2、保存勾选值,分页记录,添加 :reserve-selection="true"

大部分情况下,表格的数据是有分页的,分页一般是要请求后台接口,这样上一页也就是上一次请求的数据的选中状态就没有了。element-ui提供了reserve-selection,可以保存数据更新前选中的值,仅对 type=selection 的列有效,类型为 Boolean,为 true 则会在数据更新之后保留之前选中的数据(需指定 row-key)。

javascript 复制代码
<el-table 
    v-loading="loading" 
    ref="multipleTableRef" 
    :data="tableList" 
    @selection-change="handleSelectionChange" // 多选事件
    :row-key="getRowKeys"
>
    <el-table-column type="selection" :reserve-selection="true" width="55" fixed='left' />
</el-table>

<script setup name="serviceLeader">
const multipleTableRef = ref();
const multipleSelection = ref([]) // 多选的数据
// 多选
const handleSelectionChange = (val) => {
    console.log('多选', val)
    multipleSelection.value = val
}
// 
const getRowKeys = (row) => {
    return row.id
}
</script>
相关推荐
fruge6 分钟前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
neter.asia14 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫15 分钟前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
十一吖i33 分钟前
前端将后端返回的文件下载到本地
vue.js·elementplus
光影少年34 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_35 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891137 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾39 分钟前
前端基础-html-注册界面
前端·算法·html
Rattenking39 分钟前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
Dragon Wu41 分钟前
前端 Canvas 绘画 总结
前端