//删除按钮click触发删除事件
<el-button class="delete" type="delete" @click="delete"></el-button>
<template>
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column label="日期" width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="120"></el-table-column>
<el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
</el-table>
</template>
//表格 因为这里需要批量删除所以表格加多选参考vue的element ui官方文档Table表格
https://element.eleme.io/#/zh-CN/component/table
//这里的tableData表格数据声名空数组从后台获取的
export default {
data() {
return {
tableData: [],
multipleSelection: []
}
},
methods: {
//这里是被选中的表格数据为数组
handleSelectionChange(val) {
this.multipleSelection = val;
}
//删除事件
delete(){
if(this.multipleSelection==""){
this.$message.warning('请至少选择一条数据进行删除!')
}else{
this.$confirm('此操作将永久删除该权限,是否继续?','提示',{
confirmButtonText:'确定',
cancelButtonText:'取消',
type:'warning',
center:true
}).then(()=>{
// 声明空数组,这里的数组是后端需要的数据
let arrray=[]
//遍历勾选数据取自己需要的id等这里是和后端需要的参数对应
for(let i=0;i<this.multipleSelection.length;i++){
let obj={}//这里的对象数据是需要删除的数据 这里声明为了不重复
obj.menuId=this.multipleSelection[i].menuId;
obj.userId=this.multipleSelection[i].userId;
arrray.push(obj)//把取出的对象push到数组里
}
delete(arrray).then(res=>{ //接口
console.log(res);
this.search();//删完成功后初始化查询列表
})
})
}
}
}
}
个人意见 不喜勿喷 谢谢!