vue中批量删除的实现
注意上方getList的url为使用反转的单引号,不是平时使用的普通单引号。上面代码中 list为js data中声明的数据,用于接收后台返回的数据。前端和后台交互的JS。
·
1、在列表页面添加批量删除按钮:
<el-button type="danger" size="mini" @click="removeRows()">批量删除</el-button>
2、在每条数据前面添加复选框:
<el-table-column type="selection" width="55"/>
3、表格中添加selection-change事件,添加位置:
<el-table :data="list" stripe style="width: 100%" @selection-change="handleSelectionChange">
上面代码中 list为js data中声明的数据,用于接收后台返回的数据
4、编写批量删除JS代码:
<script>
import user from '@/api/user'
export default{
//定义变量和初始值
data(){
return{
current:1,
limit:10,
searchObj:{}, //条件查询封装对象
list:[],
total:0,
multipleSelection: [] // 批量选择中选择的记录列表
}
},
created(){ //在页面渲染前执行
this.getList()
},
methods: {
//数据列表
getList(page=1){ //添加当前页参数,page传多少切换为实际值
this.current=page
user.getList(this.current,this.limit,this.searchObj)
.then(response => {
//console.log(response.data)
this.list=response.data.records
this.total=response.data.total
})
.catch(error => {
console.log(error)
})
},
removeRows(){
this.$confirm('此操作将永久删除选中的用户信息, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(()=>{
var idList=[]
for(var i=0;i<this.multipleSelection.length;i++){
var obj=this.multipleSelection[i]
var id=obj.id
idList.push(id)
}
user.batchRemove(idList)
.then(response => {
//提示
this.$message({
type: 'success',
message: '删除成功!'
})
//刷新页面
this.getList(1)
})
})
}
}
}
</script>
前端和后台交互的JS
import request from '@/utils/request'
export default{
getList(current,limit,searchObj) {
return request({
url: `/api/user/list/${current}/${limit}`,
method: 'post',
data:searchObj
})
},
batchRemove(idList){
return request({
url: `/api/user/batchRemove`,
method: 'delete',
data:idList
})
}
}
注意上方getList的url为使用反转的单引号,不是平时使用的普通单引号。
更多推荐
已为社区贡献2条内容
所有评论(0)