vue中批量删除的实现_vue批量删除

1、在列表页面添加批量删除按钮：

<el-button type="danger" size="mini" @click="removeRows()">批量删除</el-button>

2、在每条数据前面添加复选框：

<el-table-column type="selection" width="55"/>

3、表格中添加selection-change事件，添加位置：

 <el-table :data="list" stripe style="width: 100%" @selection-change="handleSelectionChange">

上面代码中 list为js data中声明的数据，用于接收后台返回的数据

4、编写批量删除JS代码：

<script>
 
import user from '@/api/user'
 
export default{
  //定义变量和初始值
  data(){
    return{
      current:1,
      limit:10,
      searchObj:{}, //条件查询封装对象
      list:[],
      total:0,
      multipleSelection: [] // 批量选择中选择的记录列表
    }
  },
  created(){  //在页面渲染前执行
       this.getList()
  },
  methods: {
    //数据列表
    getList(page=1){ //添加当前页参数，page传多少切换为实际值
      this.current=page
      user.getList(this.current,this.limit,this.searchObj)
              .then(response => {
                //console.log(response.data)
                 this.list=response.data.records
                 this.total=response.data.total
              })
              .catch(error => {
                console.log(error)
              })
    },
 
removeRows(){
  this.$confirm('此操作将永久删除选中的用户信息, 是否继续?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
   }).then(()=>{
    var idList=[]
    for(var i=0;i<this.multipleSelection.length;i++){
        var obj=this.multipleSelection[i]
        var id=obj.id
        idList.push(id)
     }
     user.batchRemove(idList)
            .then(response => {
              //提示
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              //刷新页面
              this.getList(1)
 
              })
            
       })
    }
 
  }
}
 
</script>

前端和后台交互的JS

import request from '@/utils/request'
 
export default{
 getList(current,limit,searchObj) {
    return request({
      url: `/api/user/list/${current}/${limit}`,
      method: 'post',
      data:searchObj
    })
  },
 
 batchRemove(idList){
  return request({
    url: `/api/user/batchRemove`,
    method: 'delete',
    data:idList
  })
 }
}

注意上方getList的url为使用反转的单引号，不是平时使用的普通单引号。