当前位置：首页 > article >正文

Vue 3 中实现 Element Plus 表格的多选功能与条件操作（附Demo）

article 2025/9/18 10:35:46

前言

本文主要以Demo的形式展示，展示要点为主

基本的vue3知识可通过查阅此专栏

基本知识点

数据绑定：
v-model 用于双向绑定数据，el-table 的 :data 属性用于绑定表格数据
选择框列：
使用 el-table-column 的 type=“selection” 属性来创建多选框列
处理选择变化：
@selection-change 事件用于处理选择状态变化，获取选中的数据
过滤和操作：
通过对选中的数据进行过滤和处理，实现不同的操作需求

1. Demo

多选按钮通常用于选择表格中的多行数据

常用的 UI 框架如 Element Plus 提供了易于集成的多选功能

<template><el-tablev-loading="loading":data="tableData":stripe="true":show-overflow-tooltip="true"@selection-change="handleSelectionChange"><el-table-column type="selection" width="55" /><el-table-column label="名称" prop="name" /><el-table-column label="状态" prop="status" /><el-table-column label="操作" fixed="right" width="200"><template #default="scope"><el-button @click="viewDetails(scope.row)">查看详情</el-button></template></el-table-column></el-table><el-button @click="handleBatchAction">执行批量操作</el-button>
</template>

其js如下：

<script setup>
import { ref } from 'vue';
import { ElTable, ElTableColumn, ElButton, ElMessage } from 'element-plus';const loading = ref(false);
const tableData = ref([{ id: 1, name: 'Item 1', status: '未提交' },{ id: 2, name: 'Item 2', status: '已提交' },// ...更多数据
]);const selectedRows = ref([]);const handleSelectionChange = (selection) => {selectedRows.value = selection;
};const viewDetails = (row) => {// 显示详情console.log('查看详情:', row);
};const handleBatchAction = () => {if (selectedRows.value.length === 0) {ElMessage.warning('请选择要操作的项');return;}if (selectedRows.value.some(row => row.status !== '未提交')) {ElMessage.warning('只能对“未提交”状态的记录进行操作');return;}// 执行批量操作console.log('批量操作:', selectedRows.value);
};
</script>

表格组件：el-table 组件用于展示数据，type=“selection” 创建多选框列
handleSelectionChange：处理选中项的变化，将选中的数据存储在 selectedRows 中
viewDetails：用于查看单条记录的详细信息
handleBatchAction：处理批量操作的逻辑，包括检查选中项的状态是否符合条件（如状态为“未提交”），然后执行操作

2. 实战

以上主要为了展示Demo的基本要点

对于实战也同理

增加选项按钮以及按钮触发

在这里插入图片描述

通过按钮的选中收集相关信息

在这里插入图片描述

将列表的id以数组的形式传输给后端
（上面我多收集了一个status，不满足的status可以在此处做过滤，让其不会触发按钮框并且有提示）

在这里插入图片描述

结果如下：

在这里插入图片描述

基于上述的Demo以及实战

通过按钮做一键删除、修改等操作就很简单了

时隔半个月，又有批量删除的需求，对此再次进行复习

在这里插入图片描述

对应需要将所有的id传输到后端

原本前端单个删除按钮如下：

// 删除堆存计划
deleteGoodsStoragePlan: async (id: number) => {return await request.delete({ url: `/dangerous/goods-storage-plan/delete?id=` + id })
},

仿照其传输的方式：

deleteAllGoodsStoragePlan: async (data) => {// 以数组的形式传输给后端const idsString = data.join(',');return await request.post({ url: `/dangerous/goods-storage-plan/deleteAll`, params: {ids: idsString}})
},

由于自身用的是Java相关代码，此处也放出相应的逻辑

@DeleteMapping("/delete")
@Operation(summary = "删除堆存计划")
@Parameter(name = "id", description = "编号", required = true)
@PreAuthorize("@ss.hasPermission('dangerous:goods-storage-plan:delete')")
public CommonResult<Boolean> deleteGoodsStoragePlan(@RequestParam("id") Long id) {goodsStoragePlanService.deleteGoodsStoragePlan(id);return success(true);
}@PostMapping("/deleteAll")
@Operation(summary = "删除堆存计划")
@Parameter(name = "ids", description = "编号", required = true)
@PreAuthorize("@ss.hasPermission('dangerous:goods-storage-plan:deleteAll')")
public CommonResult<Boolean> deleteAllGoodsStoragePlan(@RequestParam("ids") List<Long> ids) {goodsStoragePlanService.deleteAllGoodsStoragePlan(ids);return success(true);
}