elementUI批量删除功能实现

elementUI批量删除功能实现

elementUI是开发管理后台前端部分的一大利器。由于项目需求需要做一个批量删除的功能，与其说批量删除，不如说是勾选删除吧。文章转载于：https://blog.csdn.net/u013818947/article/details/82691221 

批量删除的数据来源于客户端的查询后对数据的遍历。当用户勾选复选框时，将会触发selection-change事件。

     
     
       ...
 

 

 批量删除按钮不应该一直出现在页面中，而是应当在用户勾选了表格中的数据时才出现，所以我们给他一个flag做标识。批量删除属于比较危险的操作，友好操作需要，我们再用对话框确认用户是否确定要删除

 

       批量删除
  
  
        确定要删除吗
        
          确 定
          取 消
        
  

所以删除的思路应当是这样子 ： 
  用户勾选表格->multipleSelectionFlag==true-> 批量按钮出现->点击批量删除按钮->multiDeleteVisible==true->对话框出现->点击确定按钮->触发multiDelete事件

 

handleSelectionChange(val) {
    // console.log(val);  
    this.multipleSelection = val;
    this.multipleSelectionFlag = true;
    if (this.multipleSelection.length == 0) {   
       // 如不进行判断则勾选完毕后批量删除按钮还是会在
      this.multipleSelectionFlag = false;
    }
}

multiDelete() {
this.multiDeleteVisible = false;
   let checkArr = this.multipleSelection;   // multipleSelection存储了勾选到的数据
   let params = [];
   let self = this;
   checkArr.forEach(function (item) {     
     params.push(item._id);       // 添加所有需要删除数据的id到一个数组，post提交过去
   });

     //  $http即是axios，可以在main.js里面设置 Vue.prototype.$http = axios;
   this.$http.post('/fashion/multiDelete', params).then(function (res) {
     if (res.data.status == '1') {
       self.$message({
         message: '删除成功',
         type: 'success'
       });
     }
     self.getFashionList(1, 1, 5);
   })
 }

通信过程中由于端口不同会产生跨域，去config/index.js里面设置代理

proxyTable: {
      '/fashion/*': {
        target: 'http://127.0.0.1:3020',
        changeOrigin: true
      }
  }

数据传递到了后台，便可以通过express和mongoose来进行删除。此处直接贴代码不做任何解释了.

router.post('/multiDelete', function (req, res) {
  let arr = req.body;
  fashions.remove({
      "_id": { $in: arr }
  }, function (err, doc) {
      if (err) {
          res.json({
              status: '0',
              msg: err.message,
              result: ''
          });
      } else {
          res.json({
              status: '1',
              msg: '删除成功',
              result: ''
          })
      }
  });
})

 如果你想在前端的表格加一个删除的按钮，你需要这么做。scope.row._id即是该条数据的id，接下来只要将id通过http请求传递到后台，然后后台链接数据库删除就可以了