Vue简单实现弹框,删除功能
找了好多方法都太麻烦了~查官方文档稍微改改还是简单这是官方的<template><el-button type="text" @click="open">点击打开 Message Box</el-button></template><script>export default {methods: {open() {this.$confir
·
找了好多方法都太麻烦了~查官方文档稍微改改还是简单
这是官方的
<template>
<el-button type="text" @click="open">点击打开 Message Box</el-button>
</template>
<script>
export default {
methods: {
open() {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
}
}
}
</script>
未增加弹窗前:
deleteEditProject(id){
console.log(id)
this.$http.delProject(id).then(res => {
if(res && res.status == 204){
const project = res.data
this.projects.splice(project,1)
this.$message.success('恭喜!项目删除成功!')
}
});
},
修改后的:
<template slot-scope="scope">
<el-button @click="deleteEditProject(scope.$index)" type="danger" size="mini">删除
</el-button>
</template>
//删除功能
deleteEditProject(index){
console.log(index)
this.$confirm('此操作将永久删除该项目, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
var id = this.projects[index].id
console.log(id)
this.$http.delProject(id).then(res => {
if(res && res.status == 204){
const project = res.data
// this.projects.splice(project,1)
this.projects.splice(index,1)
// this.initProjectForm()
this.$message.success('恭喜!项目删除成功!')
}
});
}).catch(() => {
this.$message.info('已取消删除');
});
},
我重写了下message.js所以直接用的~
更多推荐
已为社区贡献2条内容
所有评论(0)