vue复选框批量删除

在Vue中实现复选框的批量删除，您可以按照以下步骤进行操作：

1. 首先，在列表页面中添加一个批量删除按钮，可以使用Element UI的el-button组件来实现，设置按钮的类型为danger，大小为mini，并绑定点击事件removeRows()。

2. 然后，在Vue组件中编写批量删除的JS代码。在data中定义一个multipleSelection数组，用于存储选中的记录列表。在removeRows方法中，使用this.$confirm方法弹出一个确认框，当用户点击确定时，遍历multipleSelection数组，获取选中记录的id，并将id存入idList数组中。然后调用用户API的batchRemove方法进行批量删除，删除成功后提示用户删除成功，并刷新页面。

3. 在表格中添加selection-change事件，绑定到handleSelectionChange方法。在该方法中，将选中的记录赋值给multipleSelection数组。

下面是示例代码：

<template>
  <div>
    <el-button type="danger" size="mini" @click="removeRows">批量删除</el-button>
    <el-table :data="list" stripe style="width: 100%" @selection-change="handleSelectionChange">
      <!-- 表格列配置 -->
    </el-table>
  </div>
</template>

<script>
import user from '@/api/user'

export default {
  data() {
    return {
      list: [], // 数据列表
      multipleSelection: [] // 批量选择中选择的记录列表
    }
  },
  created() {
    this.getList() // 在页面渲染前执行获取列表数据的方法
  },
  methods: {
    getList() {
      // 获取数据列表的方法
    },
    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()
          })
      })
    },
    handleSelectionChange(val) {
      // 处理选中记录变化的方法
      this.multipleSelection = val
    }
  }
}
</script>