Avue实现批量删除等功能（附Demo）

前言

由于近期慢慢转全栈，后续会以前后端的形式讲解

1. 对应的Avue相关知识推荐阅读：【vue】avue-crud表单属性配置（表格以及列）
2. 对应后端知识推荐阅读：java框架 零基础从入门到精通的学习路线 附开源项目面经等（超全）

对于单个删除的功能比较好删除，如果多选的形式删除需要获取多个id列表，对应在后端进行删除

在讲述批量删前，先补充单一的删除逻辑

1. 公共逻辑

前端对应的逻辑如下：

<avue-crud :option="option"
           :table-loading="loading"
           :data="data"
           :page="page"
           :permission="permissionList"
           :before-open="beforeOpen"
           v-model="form"
           ref="crud"
           @row-update="rowUpdate"
           @row-save="rowSave"
           @row-del="rowDel"
           @search-change="searchChange"
           @search-reset="searchReset"
           @selection-change="selectionChange"
           @current-change="currentChange"
           @size-change="sizeChange"
           @refresh-change="refreshChange"
           @on-load="onLoad"
           @current-row-change="handleCurrentRowChange"
           @row-click="handleRowClick"
>
  <template slot="menuLeft">

    <el-button type="danger"
               size="small"
               icon="el-icon-delete"
               plain
               @click="handleDelete">删 除
    </el-button>

  </template>

</avue-crud>

对于单个删除或者批量删除，接口也可做成一样的

export const remove = (ids) => {
  return request({
    url: '/api/xxx/yyy/remove',
    method: 'post',
    params: {
      ids,
    }
  })
}

后端的接口如下：

@PostMapping("/remove")
@ApiOperationSupport(order = 7)
@ApiOperation(value = "逻辑删除", notes = "传入ids")
public R remove(@ApiParam(value = "主键集合", required = true) @RequestParam String ids) {
	return R.status(tyreRepareOrderService.deleteLogic(Func.toLongList(ids)));
}

对于Func工具类，内部其实是Arrays.asList(toLongArray(str));

2. 单个删除

对应前端界面的method逻辑方法：

handleDelete() {
	  if (this.currentRow== null) {
		this.$message.warning("请选择一条数据");
	    return;
	  }
	  this.$confirm("确定将选择数据删除?", {
	    confirmButtonText: "确定",
	    cancelButtonText: "取消",
	    type: "warning"
	  })
	    .then(() => {
	      return remove(this.currentRow.id);
	    })
	    .then(() => {
	      this.onLoad(this.page);
	      this.$message({
	        type: "success",
	        message: "操作成功!"
	      });
	      // this.$refs.crud.toggleSelection();
	    });
},

3. 批量删除

与单个删除不同的点在于需要有按钮框选择！

// 新增的按钮选项
option: {
  menu:true,
  align:'center',
  stripe:true,
  tip: false,
  border: true,
  index: false,
  viewBtn: false,
  highlightCurrentRow:true,
  searchShow:false,
  selection:true, 
  searchMenuSpan: 6,
  calcHeight: 30,
  height:'auto',
  addBtn:true,
  delBtn:true,
  column: [
    {

只需要将selection改为true即可

对应的前端逻辑如下：（主要参照逻辑）

computed: {
  
      // 批量ids ，为了删除等操作
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      },
      newModel(){
        return this.formInline.model;
      }
    },

对应删除的方法如下：

handleDelete() {
	  if (this.selectionList.length === 0) {
	    this.$message.warning("请选择至少一条数据");
	    return;
	  }
	  this.$confirm("确定将选择数据删除?", {
	    confirmButtonText: "确定",
	    cancelButtonText: "取消",
	    type: "warning"
	  })
	    .then(() => {
	      return remove(this.ids);
	    })
	    .then(() => {
	      this.onLoad(this.page);
	      this.$message({
	        type: "success",
	        message: "操作成功!"
	      });
	      // this.$refs.crud.toggleSelection();
	    });
},