找了好多方法都太麻烦了~查官方文档稍微改改还是简单

这是官方的

<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所以直接用的~
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐