Element-ui+node实现单选多选，批量删除

添加一个批量删除按钮， multipleSelection.length === 0用来判断是否点击选择，如果没有选中任意一项，那么批量删除按钮不可点击，选择数据之后，才可以进行数据的批量删除

 <el-button 
        type="danger" 
        icon="el-icon-delete" 
        @click="delAll"  
        :disabled="multipleSelection.length === 0"   
        style="margin-left:15px;" >
        批量删除
</el-button>

想要获取不同页的数据进行操作，利用reserve-selection，需要注意的是使用reserve-selection属性必须配合row-key（不然会报错） 

 <el-table

    tooltip-effect="dark"
    style="width: 100%"
     v-loading="listLoading"
      :data="datalist"
      @selection-change="handleSelectionChange"    //多选，当选择项发生变化时会触发该事件
      @row-click="handleRowClick"    //点击每行时触发事件
      ref="handSelectTest_multipleTable"  //添加属性
      row-key="id">
//手动添加一个el-table-column，设type属性为selection即可
   <el-table-column
         type = 'selection'
         label="全选"
         width="55"
         :reserve-selection="true">  //选择其他页时，之前页选的的框依然存在
  </el-table-column>
</el-table>

在方法中添加点击复选框、点击行和根据id批量删除的方法

 methods:{
     handleSelectionChange(val) {
        console.log(val)  //打印选中的行集合
        this.multipleSelection = val;
    },
    //点击行触发，选中或不选中复选框
   	handleRowClick(row, column, event) {
        this.$refs.handSelectTest_multipleTable.toggleRowSelection(row);
        console.log(row)  //打印的时当前选中的行
    },

    // 批量删除
    async delAll(){
    var arr=[]
      //遍历点击选择的对象集合，拿到每一个对象的id添加到新的集合中
      this.multipleSelection.forEach(row=>arr.push(row._id))
            console.log(this.multipleSelection);
            arr.forEach(item=>{
               this.http.delete(`del/${item}`)
            })
  
    } ,
}

后端接口代码

// 删除数据
router.delete('/del/:_id',async (req,res)=>{
  // console.log(req.params.id);
  var r=await user.deleteOne({_id:req.params._id}).exec()
  console.log(r);
  res.json({code:200})
})