elementUI批量删除功能实现

elementUI批量删除功能实现

elementUI是开发管理后台前端部分的一大利器。由于项目需求需要做一个批量删除的功能，与其说批量删除，不如说是勾选删除吧。

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

 <el-table :data="fashionData" tooltip-effect="dark" ref="multipleTable" @selection-change="handleSelectionChange">
     <el-table-column type="selection" width="55" align="center">
     </el-table-column>
       ...
 </el-table>

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

  <el-button type="danger" v-if="multipleSelectionFlag" @click="popDelete">
       批量删除
  </el-button>
  <el-dialog :visible.sync="multiDeleteVisible" title="提示" width="30%">
        <span>确定要删除吗</span>
        <span slot="footer">
          <el-button type="primary" @click="multiDelete">确 定</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
        </span>
  </el-dialog>

<script>
   export default{
     data(){
       return {
           multipleSelectionFlag:false,
           multiDeleteVisible:false，
           multipleSelection:''
        }
      }
    }
</script>

所以删除的思路应当是这样子 ：
  用户勾选表格->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请求传递到后台，然后后台链接数据库删除就可以了

<el-table-column label="操作" align="center">
 <template slot-scope="scope">
   <el-button type="danger" icon="el-icon-delete" size="small" @click="deleteData(scope.row._id)"></el-button>
 </template>
</el-table-column>