elementUI批量删除功能实现
elementUI是开发管理后台前端部分的一大利器。由于项目需求需要做一个批量删除的功能,与其说批量删除,不如说是勾选删除吧。文章转载于:https://blog.csdn.net/u013818947/article/details/82691221
批量删除的数据来源于客户端的查询后对数据的遍历。当用户勾选复选框时,将会触发selection-change事件。
<el-table :data="fashionData" tooltip-effect="dark" ref="multipleTable" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center">
</el-table-column>
...
</el-table>
批量删除按钮不应该一直出现在页面中,而是应当在用户勾选了表格中的数据时才出现,所以我们给他一个flag做标识。批量删除属于比较危险的操作,友好操作需要,我们再用对话框确认用户是否确定要删除
<el-button type="danger" v-if="multipleSelectionFlag" @click="popDelete">
批量删除
</el-button>
<el-dialog :visible.sync="multiDeleteVisible" title="提示" width="30%">
<span>确定要删除吗</span>
<span slot="footer">
<el-button type="primary" @click="multiDelete">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</span>
</el-dialog>
<script>
export default{
data(){
return {
multipleSelectionFlag:false,
multiDeleteVisible:false,
multipleSelection:''
}
}
}
</script>
所以删除的思路应当是这样子 :
用户勾选表格->multipleSelectionFlag==true-> 批量按钮出现->点击批量删除按钮->multiDeleteVisible==true->对话框出现->点击确定按钮->触发multiDelete事件
handleSelectionChange(val) {
// console.log(val);
this.multipleSelection = val;
this.multipleSelectionFlag = true;
if (this.multipleSelection.length == 0) {
// 如不进行判断则勾选完毕后批量删除按钮还是会在
this.multipleSelectionFlag = false;
}
}
multiDelete() {
this.multiDeleteVisible = false;
let checkArr = this.multipleSelection; // multipleSelection存储了勾选到的数据
let params = [];
let self = this;
checkArr.forEach(function (item) {
params.push(item._id); // 添加所有需要删除数据的id到一个数组,post提交过去
});
// $http即是axios,可以在main.js里面设置 Vue.prototype.$http = axios;
this.$http.post('/fashion/multiDelete', params).then(function (res) {
if (res.data.status == '1') {
self.$message({
message: '删除成功',
type: 'success'
});
}
self.getFashionList(1, 1, 5);
})
}
通信过程中由于端口不同会产生跨域,去config/index.js里面设置代理
proxyTable: {
'/fashion/*': {
target: 'http://127.0.0.1:3020',
changeOrigin: true
}
}
数据传递到了后台,便可以通过express和mongoose来进行删除。此处直接贴代码不做任何解释了.
router.post('/multiDelete', function (req, res) {
let arr = req.body;
fashions.remove({
"_id": { $in: arr }
}, function (err, doc) {
if (err) {
res.json({
status: '0',
msg: err.message,
result: ''
});
} else {
res.json({
status: '1',
msg: '删除成功',
result: ''
})
}
});
})
如果你想在前端的表格加一个删除的按钮,你需要这么做。scope.row._id即是该条数据的id,接下来只要将id通过http请求传递到后台,然后后台链接数据库删除就可以了
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button type="danger" icon="el-icon-delete" size="small" @click="deleteData(scope.row._id)"></el-button>
</template>
</el-table-column>