Avue批量删除功能如何实现？前端和后端写法

前端：

 在前端vue的crud中添加@selection-change="selectionChange"

在js文件对应地方加上 selection:true

<el-button type="danger" @click="delSelection" >批量删除</el-button>

加上批量删除按钮。

做了以上这些之后，前端就会出现多选框和按钮 

 

前端对应的批量删除方法

//批量删除
          selectionChange(item){
            this.ids = item;    //将选中的每行数据放入变量中
          },

          delSelection(item){
            for (var i = 0; i < this.ids.length; i++) {
              this.deleteData.push(this.ids[i].invoiceId)  //逐个取出变量中每行数据的id
            }
            //alert(this.deleteData.toString())
            if (this.deleteData.length !=0){  //ids为之定义的数组属性值，在data()中定义
              this.$confirm("是否确认删除选中的所有记录吗？", "提示", {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then( ()=> {
                return delByids(this.deleteData)   //后端接口根据数组批量删除记录
              }).then(data => {
                this.ids = [],
                this.deleteData = []          //清空选中的数据行
                this.$message.success('删除成功')
                this.getList(this.page)   //刷新数据

              })
            }else{
              this.$message.error('未选中任何项')
            }
          },

 

在data中定义数组 变量。

 配置后端访问路径。

后端controller层：

 如果你报这种错误

那么就是你前端传的数据类型和后端接收的参数类型不一致，如果主键是自动生成的varchar类型，那麽在数据库中会是很长的一段数字。后端就不能是List<Integer>，应该使用String类型，修改成List<String>。