11.Vue+elementUI实现批量删除

前言：

用vue和elementUI实现批量操作常见于table表格，前提是table表第一列是可以多选的框：

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

                      

如上图所示，当没有选中任何一项时，批量删除按钮是不可点击的，当选中其中一项或多项时，批量删除按钮变成可点击；

下边就具体介绍一下，如何实现批量删除功能：

1.首先给按钮加disabled属性

<el-button size="small" type="primary" @click="batchDelete" :disabled="batchDeleteArr.length === 0">批量删除</el-button>

//data里事先声明batchDeleteArr
data:{
    batchDeleteArr:[]
}

也就是说，当batchDeleteArr为空数组时，按钮不可点击；

2.给table添加change事件，动态获取batchDeleteArr

<el-table
    :data="tableData"
    :height="tableHeight"
    v-loading="tableLoading"
    border
    stripe
    size="mini"
    style="width: 100%"
    @selection-change="handleSelectionChange">
 ......

然后在change事件动态获取batchDeleteArr 

handleSelectionChange(val) {
   this.batchDeleteArr = val
},

如果选中table表中的某一项或其中几项，batchDeleteArr 数组会动态更新，这时数组长度肯定不为0，批量删除按钮可点击；

3.执行批量删除方法batchDelete

// 批量删除
batchDelete () {
   let deleteData = this.batchDeleteArr.map(item => {
       const {server_asset_id} = item
       return {server_asset_id}
   })
   this.deleteApi(deleteData)
},

上边代码意思是，首先map遍历batchDeleteArr，将选中的某几项的id返回出去，

然后去调用删除一项的方法deleteApi，并以获取到的id组成的数组deleteData为参数

deleteApi(data) {
   const _this = this
   this.$confirm("确定删除？", '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async() => {
      const response = await _this.$post(server_asset_info_del.url, data)
      this.$message({
          message: response.msg,
          type: 'success',
          duration: 1500,
          onClose: function () {
             let form = {
                 "page": _this.page,
                 "limit": _this.limit
             }
             _this.getData(form)
          }
       });
   })
},

此时需要注意的是，deleteApi删除方法，传递的参数为数组类型，所以在页面，删除按钮，传的参数也得是数组类型：

 <el-button type="primary" size="mini" @click="deleteApi([{'server_asset_id':scope.row.server_asset_id}])">删除</el-button>

至此，vue+elementUI实现批量删除操作就完成了。记录一下，以便于日后遇到可以及时运用。