spring boot 配合element ui vue实现表格的批量删除（前后端详细教学，简单易懂，有手就行）

目录

一.前言：

二. 前端代码：

2.1.element ui组件代码

 

2.2删除按钮

2.3.data

2.4.methods

三.后端代码：

---

一.前言：

研究了其他人的博客，找到了一篇有含金量的，进行了部分改写实现前后端分离，参考博主为小白Rachel

先看看页面效果，要是符合你们所需的功能那就继续看下去

 

 

 

 

1406 1407 被干掉了 

二. 前端代码：

2.1.element ui组件代码

想要实现勾选框那么就需要加上 

<el-table-column type="selection" width="55" align="center" />

加入事件。该事件可用于获取勾选到的那一行数据的id，如果勾选多行数据，那么就会将id打包成数组，我们就可以将数组传给后端，然后由Java程序员（还是我）进行接收，进行批量删除。

@selection-change="handleSelectionChange"

 

 <el-table
        :data="operLogs"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <template>
        <!-- `checked` 为 true 或 false -->
        <el-checkbox v-model="checked">备选项</el-checkbox>
      </template>
      <el-table-column
          label="日志编号"
          width="140">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.operId }}</span>
        </template>
      </el-table-column>

 

 

2.2删除按钮

        <el-popconfirm
            confirm-button-text='好的'
            cancel-button-text='取消'
            icon="el-icon-info"
            icon-color="red"
            @confirm="handleDelete()"
            title="确定删除吗？"
            >
          <el-button type="danger" round size="mini" slot="reference" :disabled="multiple">删除</el-button>
        </el-popconfirm>

:disabled="multiple"

设置状态默认为true 代表禁用了。

2.3.data

data() {
    return {
// 选中数组
      ids: [],
// 非单个禁用
      single: true,
// 非多个禁用
      multiple: true,
    }
  },

 因为我的data里面的数据太多，所以我就进行了删减，把实现批量删除的数据给列了出来。

2.4.methods

// 多选框选中数据
    handleSelectionChange(selection) {
      console.log(selection);
      this.ids = selection.map(item => item.operId);// 需要根据数据情况调整id名称
      console.log(this.ids);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },

    handleDelete() {
      //传数组进行批量删除
      this.axios.post("http://localhost:8080/operLog", this.ids)
          .then(result => {
            if (result.data.status == "OK") {
              this.loadOperLogByPage(this.current);
            }
          })
    },

// 多选框选中数据
    handleSelectionChange(selection) {
      console.log(selection);
      this.ids = selection.map(item => item.operId);// 需要根据数据情况调整id名称
      console.log(this.ids);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },

如果选中了数据，就修改mulitple的属性为false，改变button的disabled为false，代表可以勾选

handleDelete() {
  //传数组进行批量删除
  this.axios.post("http://localhost:8080/operLog", this.ids)
      .then(result => {
        if (result.data.status == "OK") {
          this.loadOperLogByPage(this.current);
        }
      })
},

懂得都懂

 

三.后端代码：

    @PostMapping("/operLog")
    public ResponseResult<String> deleteByIds(@RequestBody List<Long> operIds){
        System.out.println(operIds);
        int i = operLogService.deleteByIds(operIds);
        if (i==1){
            return ResponseResult.ok("删除成功");
        }
        else {
            return ResponseResult.ok("删除失败");
        }
    }

执行批量删除，一行搞定