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

这篇具有很好参考价值的文章主要介绍了spring boot 配合element ui vue实现表格的批量删除（前后端详细教学，简单易懂，有手就行）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一.前言：

二. 前端代码：

2.1.element ui组件代码

2.2删除按钮

2.3.data

2.4.methods

三.后端代码：

一.前言：

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

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

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

1406 1407 被干掉了

二. 前端代码：

2.1.element ui组件代码

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

想要实现勾选框那么就需要加上
<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("删除失败");
        }
    }

执行批量删除，一行搞定文章来源地址https://www.toymoban.com/news/detail-443376.html

到了这里，关于spring boot 配合element ui vue实现表格的批量删除（前后端详细教学，简单易懂，有手就行）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！