Vue批量删除表格中的多条记录
选择多条记录,点击删除按钮调用onDelete方法进行删除
<table-buttons>
<div slot="info">
<span>已选 { { multipleSelection.length}} 条记录</span>
</div>
<div slot="buttons">
<el-button @click="toAdd" type="text" icon="el-icon-plus">新增</el-button>
<el-button type="text" @click="onDelete" icon="el-icon-delete" v-if="multipleSelection.length >0 ">删除
</el-button>
<el-button type="text" icon="el-icon-delete" v-else disabled>删除</el-button>
</div>
</table-buttons>
删除方法代码
/** * 删除 */
onDelete (row) {
let params = {
ids: []
}
if (row.id) {
params.ids.push(row.id)
} else {
this.multipleSelection.some(item => {
params.ids.push(item.id)
})
}
deleteOne(params).then(resp => {
if (resp.status === 200) {
this.$message({
type: 'success',
message: '删除成功'
})
this.loadData() // 加载数据
} else {
this.$message({
type: 'warning',
message: '删除失败'
})
}
})
}
成功删除后的提示