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>
相关推荐
daols881 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
小小小小宇2 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊2 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习3 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖3 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖3 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水4 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐4 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06274 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台4 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue