今天下午研究了一下 方法较简单
前端是vue+element框架 后端node.js
前端:
<el-table-column type="selection" width="55"></el-table-column>
然后给table加个方法 @selection-change="handleSelectionChange"
然后在data中定义两个空数组接受
tableChecked: [],
ids: [],
methods定义一个方法
handleSelectionChange(val) {
this.tableChecked = val
你可以console.log(val) 看看有没有选中到值
},
然后创建1个批量删除的按钮
<el-col :span="24">
<el-button type="primary" :disabled="this.tableChecked.length === 0" @click="batchDelete(tableChecked)">批量删除</el-button>
</el-col>
放在table外面
然后给这个按钮定义方法
methods里面
async batchDelete() {
var ids = this.tableChecked.map(item => item._id).join()
this.$confirm('确定要批量删除这些文章吗', "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(async () => {
// const res = await this.$http.delete('del/'+ids);
await this.$http.delete('del/'+ids);
this.$message({
type: "success",
message: "删除成功!"
});
this.fetch();
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除"
});
});
},
接口自己修改
后端
app.delete('/admin/api/del/:id', async (req, res) => {
const delId = req.params.id.split(',')
await Article.remove({ _id: { $in: delId } });
res.send({
success: true
})
})
