欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

elementui e-button删除,查到本条数据的id后向后台传参并进行删除

程序员文章站 2022-07-01 16:14:24
本条数据id重新渲染本页面slot-scope="scope"...

html代码
scope.row.id传递本条数据的id的参数

<template slot-scope="scope">
<el-button type="text" @click="open(scope.row.id)" size="small" >删除</el-button>
</template>

js代码

        open(e) {
            console.log(e)//e是html页面中传递过来本条数据的id
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                let that=this;//改变this指向
                axios.get('http://localhost:8080/deleteByid',{
                    params : {
                       id:e
                    }
                }).then(function (res) {
                //判断success是否为true
                    if(res.succeed===false){
                        that.$message({
                            type: 'info',
                            message: '删除失败!'
                        });
                    }else {
                        that.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        that.getTabelInfo()//删除成功后,刷新当前页面,重新渲染数据
                    }

                }).catch(function (reason) {
                    console.log(reason);
                })
        }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
        });
        }

删除成功啦!

本文地址:https://blog.csdn.net/weixin_42699659/article/details/107381680

相关标签: 前端 vue.js