当前位置: 首页 > news >正文

vue3:使用:批量删除功能

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

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

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

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

<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>

http://www.lryc.cn/news/150794.html

相关文章:

  • Scala中的样例类和样例对象和JAVA存根类
  • 【0218】当SIGQUIT kill掉stats collector后,stats collector如何保存最终统计数据
  • httplib 与 json.hpp 结合示例
  • RK3288安卓7.1开机上电到显示logo需要在3s内完成
  • Maven之hibernate-validator 高版本问题
  • C++--动态规划其他问题
  • PostgreSQL 查询语句大全
  • 扫盲:常用NoSQL数据库
  • MPI之数据打包和解包
  • 9.2作业
  • 数据库建设命名规范
  • 单元测试及其工具Junit
  • Multicast IP Interface
  • 从零学算法2833
  • python安装cfg模块时报错,ERROR: No matching distribution found for cfg
  • 优思学院|六西格玛中的概率分布有哪些?
  • 工控上位机程序为什么只能用C语言?
  • Go操作各大消息队列教程(RabbitMQ、Kafka)
  • 对话出海企业:2023亚马逊云科技出海日圆桌论坛
  • 【图解算法数据结构】分治算法篇 + Java代码实现
  • Ubuntu系统环境搭建(八)——Ubuntu开机自动执行命令
  • c++(8.29)auto关键字,lambda表达式,数据类型转换,标准模板库,list,文件操作+Xmind
  • Docker学习笔记(持续更新)
  • 无涯教程-Android - 应用组件
  • 树与图c++
  • 中小企业常用的 IT 项目管理软件有哪些?
  • 汇编原理计算方法:物理地址=段地址*16+偏移地址
  • jdk-8u371-linux-x64.tar.gz jdk-8u371-windows-x64.exe 【jdk-8u371】 全平台下载
  • 数据结构体--5.0图
  • 深入剖析 Golang 程序启动原理 - 从 ELF 入口点到GMP初始化到执行 main!