1.配置接口deleteItemById: "/api/goods/deleteItemById", //删除商品操作
2.get请求接口
// 删除接口 后台给我们 返id
deleteItemById(params){
return axios.get(base.deleteItemById,{params})
}
3.异步请求接口
async deleteItemById(id){
let res = await this.$api.deleteItemById({id})
console.log('删除',res.data);
}
4.删除完数据,表格数据也要跟着变动主要是这行代码 this.deleteItemById(row,id) 在删除事件里边操作
handleDelete(index, row) {
console.log('删除操作---',index, row);
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.deleteItemById(row,id)
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
5.删除完数据 下边的分页也要处理 在分页事件里边 把val取出来
// 分页 因为val是局部变量 在data初始化一个变量 给val传递过去
CurrentChange(val){
console.log('分页传过来的',val);
this.current = val//把this.Current给删除的重新渲染页
this.projectList(val)
},
6.传递完了给删除接口拿到页，重新把数据渲染到表格里边
// 删除接口
async deleteItemById(id){
let res = await this.$api.deleteItemById({id})
console.log('删除',res.data);
if(res.data.status===200){
this.$message({
type: 'success',
message: '删除成功!'
});
this.projectList(this.current)
}
}
7.数据删除了；假如如果当前是最后一页的最后一条数据 删除后 获取上一页的数据 判断 this.total总数目
// 如果当前是最后一页的最后一条数据 删除后 获取上一页的数据 判断 this.total总数目
if(this.total%this.pageSize === 1){
this.curent = this.curent -1 > 0? this.current:1;//最好>1
}
全部代码
<el-button size="mini" @click="handleDelete(scope.$index, scope.row)" type="danger" icon="el-icon-delete">删除</el-button>
删除接口（里边涉及到 删除事件+分页+和重新渲染）
// 删除接口
async deleteItemById(id){
let res = await this.$api.deleteItemById({id})
console.log('删除',res.data);
if(res.data.status===200){
this.$message({
type: 'success',
message: '删除成功!'
});
// 删除完之后会重新渲染页面
// 如果当前是最后一页的最后一条数据 删除后 获取上一页的数据 判断 this.total总数目
if(this.total%this.pageSize === 1){
this.curent = this.curent -1 > 0? this.current:1;//最好>1
}
this.projectList(this.current)
}
}
删除事件
handleDelete(index, row) {
console.log('删除操作---',index, row);
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.deleteItemById(row,id)
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
在删除第3页面数据 的时候，想在第3页看表格数据
// 分页 因为val是局部变量 在data初始化一个变量 给val传递过去
CurrentChange(val){
console.log('分页传过来的',val);
this.current = val//把this.Current给删除的重新渲染页
this.projectList(val)
},
data里边初始化
current =1
