element table批量删除_Vue+elementUI如何实现表格实现全选删除，批量删除

思路：

1、表格外部添加批量删除按钮

2、表格加入id字段显示和checkbox多选按钮

3、data里面定义一个ids数组，用于存储id集合

4、点击按钮获取id值，以数组方式传给后端，执行ajax删除

5、不管删除成功与否，但页面提示框关闭后，刷新列表

模板按钮区域添加点击方法batchDelete(tableChecked)

添加文章

批量删除

模板表格区域

编辑

删除

逻辑代码区域data(){

return{

tableChecked:[],//被选中的记录数据-----对应“批量删除”传的参数值

ids: [],//批量删除id

}

},

methods:{

//批量删除

async batchDelete(rows){

const confirmResult = await this.$confirm('此操作将永久删除所选文章, 是否继续?', '提示', {

confirmButtonText: '确定',

cancelButtonText: '取消',

type: 'warning'

}

).catch(err => err)

if (confirmResult != 'confirm') {

this.ids=[]

this.getArticleList()

return this.$message({ type: 'info', message: '已取消删除' })

}

rows.forEach(element =>{

this.ids.push(element.id)

})

const { data: res } = await this.$http.post('article/del', {id: this.ids})

if (res.code != 106) {

return this.$message.error(res.msg)

}

this.$message.success(res.msg)

this.getArticleList()

}

}