vue项目中批量删除功能的实现

1. 后台管理项目中基本上都有批量删除的功能，今天来简单给大家分享一下批量删除功能的实现。话不多说上代码

2. <a-button @click="batchDel">批量删除<a-icon type="delete"/> <a-button>

3. js逻辑代码

4. `

5. data () {
   selectedRowKeys: [] // table中选中的向，
   ids : ‘’, // 定义一个存放id的容器
   }
   methods : {
   // 封装一个delete的请求
   deleteAction(url,parameter) {
   return axios({
   url: url,
   method: ‘delete’,
   params: parameter
   })
   }
   // this.url.deleteBatch 是后端删除的接口

6. batchDel: function () {
     if(!this.url.deleteBatch){
       this.$message.error("请设置url.deleteBatch属性!")
       return
     }
     if (this.selectedRowKeys.length <= 0) {
       this.$message.warning('请选择一条记录！');
       return;
     } else {
       var ids = "";
       for (var a = 0; a < this.selectedRowKeys.length; a++) {
         ids += this.selectedRowKeys[a] + ",";
       }
       var that = this;
       this.$confirm({
         title: "确认删除",
         content: "是否删除选中数据?",
         onOk: function () {
           that.loading = true;
           deleteAction(that.url.deleteBatch, {ids: ids}).then((res) => {
             if (res.success) {
               that.$message.success(res.message);
               that.loadData();
               that.onClearSelected();
             } else {
               that.$message.warning(res.message);
             }
           }).finally(() => {
             that.loading = false;
           });
         }
       });
     }
   },
   

   }

7. `

9. 如果对您有帮助，请关注一下 谢谢