Avue中实现多选删除功能

---

前言

在avue框架中，实现多选功能删除多项表单记录的功能。

实现效果如下：

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、前提条件

后台写好根据记录行id进行删除数据行的接口，可以根据数组数据实现批量删除。

二、多选删除实现

1.引入库

Option属性：selection:true //开启多选功能

export const tableOption = {
  "border": true,
  "index": true,
  "indexLabel": "序号",
  "stripe": true,
  "menuAlign": "center",
  "align": "center",
  "searchMenuSpan": 6,
  "searchslot": true,
  selection:true,  //开启多选功能
  "column": [
    {
      "type": "input",
      "label":"编码",
      "prop": "productNumber",
      "formslot":true,
      "search": true,    //设置搜索项
      "span": 12,
    }, {
      "type": "input",
      "label": "描述1",
      "prop": "desc1",
      "span": 12,
    }, {
      "type": "input",
      "label": "描述2",
      "prop": "desc2",
      "span": 12,
    }, {
      "type": "input",
      "label": "版本",
      "prop": "craftVerion",
      "span": 12
    }
  ],
}

---

index.vue中在 avue-crud 设置方法： @selection-change=“selectionChange”，
然后在组件中添加自定义 tip 插槽

<avue-crud ref="crud"
         :page.sync="page"
          :data="tableData"
          :table-loading="tableLoading"
          :option="tableOption"
           @on-load="getList"
           @selection-change="selectionChange">
        //tip插槽      
        <template slot="tip" slot-scope="scope" >
          <el-button type="text" @click="delSelection">
            删除选中行
          </el-button>
        </template>
<avue-crue>

---

index.vue中的 methods对象中的方法

      //删除多行
      delSelection(){
        if (this.ids.length !=0){  //ids为之定义的数组属性值，在data()中定义
          this.$confirm("是否确认删除选中的所有记录吗？", "提示", {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(()=> {
            return delObj([this.ids])   //后端接口根据数组批量删除记录
          }).then(data => {
            this.$message.success('删除成功')
            this.getList(this.page)   //刷新数据
          })
        }else{
          this.$message.error('未选中任何项')
        }
      },
      
      //选中的数据，每选中一次，执行一次
      selectionChange(item){
        this.ids = []    //每次清空
        item.forEach((items)=>{
          this.ids.push(items.id)
        })
      },

总结

1.多选删除方便管理数据
2.需要了解avue官网属性、方法的使用
3.巩固自身前端基础
4、如果你有疑问或者有更好的实现方法请留言，交流学习