前言:

用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实现批量删除操作就完成了。记录一下,以便于日后遇到可以及时运用。

Logo

前往低代码交流专区

更多推荐