vue批量删除附后台代码-若依框架

一入程序无退路

已于 2024-06-03 10:03:29 修改

阅读量343

点赞数 3

文章标签： vue.js javascript 前端

于 2024-05-31 15:50:32 首次发布

本文链接：https://blog.csdn.net/lgq1368853532/article/details/139346552

版权

按钮

<el-button type = "danger" plain icon = "el-icon-delete" size = "mini" @click = "doDeleteButton(ids)" >批量删除</el-button>

只有管理员可删除 v-hasPermi="['system:supplier:remove']"

<el-button type = "danger" plain icon = "el-icon-delete" size = "mini" @click = "doDeleteButton(ids)" v-hasPermi="['system:supplier:remove']">批量删除</el-button>

复选框

fileList改成你自己的

<el-table :data="fileList" stripe style="width: 100%" @selection-change="handleSelectionChange">
  <el-table-column type="selection" width="55" align="center" />

import { delFilesList } from "@/api/system/";

data() {
  return {
    fileList: [],
    // 选中数组
    ids: [],

/** 批量删除 */
/** 多选框选中数据 (item => item.id) 这里的id是你自己表里的id,看好了否则后台获取不到id*/
handleSelectionChange(selection) {
  this.ids = selection.map(item => item.id)
},
/** 批量删除 */
doDeleteButton(rows) {
  if (rows.length !== 0) {
    this.$confirm('是否确认删除这' + rows.length + '条数据?', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(function () {
      return delFilesList(rows)
    }).then(() => {
      this.getList();
      this.$modal.msgSuccess("删除成功");
    })
  } else {
    this.$modal.msgSuccess("未选择数据");
  }
},

js

// 删除需求
export function delFilesList(ids) {
return request({
url: '/system/fileManagement/deleteFileManagementList/' + ids,
method: 'delete'
})
}

后台

/**
 * 删除
 * @param  ids
 */
@DeleteMapping("/deleteFileManagementList/{ids}")
public AjaxResult deleteFileManagementList(@PathVariable String[] ids) {
    for (String id : ids){
        fileManagementService.removeById(id);
    }
    return AjaxResult.success();
}