业务:设备列表,根据选中的复选框批量删除数据
vue中template里面代码:
<!-- 设备列表 --><el-table :data="eTableData" style="width: 100%;" border @selection-change="handleSelectionChange"><el-table-column type="selection" width="55" align="center"></el-table-column><el-table-column prop="equipmentName" label="设备名称" sortable align="center"></el-table-column><el-table-column prop="equipmentId" label="设备编号" sortable align="center"></el-table-column><el-table-column prop="typeSpecification" label="型号规格" sortable align="center"></el-table-column><el-table-column prop="categoryId" label="类目编号" sortable align="center"></el-table-column><el-table-column prop="addressId" label="所在区域" sortable align="center"><template slot-scope="scope">{{ scope.row.addressId === 4 ? '办公区 ':''}}{{ scope.row.addressId === 5 ? '休息区 ':''}}</template></el-table-column><el-table-column prop="manufacturerNum" label="厂家编号" sortable align="center"></el-table-column><el-table-column prop="manufacturerType" label="厂家型号" sortable align="center"></el-table-column><el-table-column prop="price" label="价格" sortable align="center"></el-table-column><el-table-column prop="buyTime" label="购置日期" sortable align="center"></el-table-column><el-table-column label="操作" width="190" align="center"><template slot-scope="scope"><el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button><el-button type="primary" size="mini" @click="handleDelete(scope.$index, scope.row)">查看</el-button></template></el-table-column></el-table>
javaScript代码
data() {return {eTableData:[],//列表数据来源selectedRows:[],//用于存储选中的行selectedRowIds:[],//用于存储选中的ID}},methods: {//处理选中的行handleSelectionChange(selected){this.selectedRows = selected; // 更新选中的行this.selectedRowIds = this.selectedRows.map(row => row.id); // 获取 ID 数组},async deleteSelectedRows(){if (this.selectedRowIds.length === 0) {this.$message.warning("请先选择要删除的项");return;}try {// 调用 eDelete 方法并传入选中的 IDawait eDelete(this.selectedRowIds);// 更新表格数据,移除已删除的行this.eTableData = this.eTableData.filter(item => !this.selectedRowIds.includes(item.id));// 清空选中状态this.selectedRows = [];this.selectedRowIds = [];this.$message.success("删除成功");} catch (error) {console.error("删除失败:", error);this.$message.error("删除失败,请稍后再试");}},},
api包下的 js 代码
// 根据选中行ID删除
export function eDelete(ids) {return request({data: ids,method: 'delete',url: '/dms/eDelete'})
}
后台控制层:
/*** 功能:设备删除*/@DeleteMapping("/eDelete")public R eDelete(@RequestBody List<String> ids) {eService.eDelete(ids);return R.ok();}
Service:
void eDelete(List<String> ids);
ServiceImpl:
@Overridepublic void eDelete(List<String> ids) {esMapper.eDelete(ids);}
Mapper:
void eDelete(@Param("ids") List<String> ids);
Mapper.xml:
<delete id="eDelete" parameterType="java.util.List">DELETE FROM t_equipmentWHERE id IN<foreach item="id" collection="ids" open="(" separator="," close=")">#{id}</foreach></delete>