1.template中引入作用域插槽
<el-table-column label="操作" width="130px">
<template slot-scope="scope" >
<el-button type="danger" icon="el-icon-delete" size="mini" ></el-button>
</template>
</el-table-column>
2.按钮中引入点击事件,带该行id
<el-table-column label="操作" width="130px">
<template slot-scope="scope" >
<el-button type="danger" icon="el-icon-delete" size="mini"
@click="removeById(scope.row.goods_id)"></el-button>
</template>
</el-table-column>
3.配置删除方法
async removeById(id){
const confirmResult = await this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).catch(err =>err)
}
4.根据判断删除
async removeById(id){
const confirmResult = await this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).catch(err =>err)
if(confirmResult !== 'confirm'){
return this.$message.info('已经取消删除！')
}
// 删除数据
const {data:res} = await this.$http.delete(`goods/${id}`)
if(res.meta.status !== 200){
return this.$message.error('删除失败！')
}
this.$message.success('删除成功！')
this.getGoodsList()
}
