Vue-elementUI删除按钮的实现

518 阅读1分钟

1、操作栏icon图标的删除,无跳转

<el-button @click='delete'>删除</el-button> 

<script>
    deleteTalentTagByIdUrl = 接口 // 数据接口
    methods: {
        // 点击删除
        async delete (row) {
            try {
                await this.$confirm('是否确认删除', {cancelButtonClass: 'btn-custom-cancel'}) // 弹框(确定在左取消在右)
                try {
                    let res = await util.httpGet(deleteTalentTagByIdUrl(接口), {id:row.id, xx:xx,(参数)}) // 接口及参数
                    this.$message({message:res.data, type:'success'}) // 删除成功提示信息
                    this.queryData() // 获取剩余列表数据
            	} catch (error){
                    this.$message({message: error.message, type:'warning'}) // 删除失败提示信息
            	}
            }catch(err){}
    	}
    }
</script>

2、点击button按钮的删除,跳转上一页

<el-button @click='delete'>删除</el-button> 

<script>
    deleteTalentTagByIdUrl = 接口 // 数据接口
    methods: {
        async delete (row) {
            try {
                // 弹框(默认取消在左确定在右)
                await this.$confirm('是否确认删除', '提示',{
                    confirmButtonText: '确定',
                    concelButtonText: '取消',
                    type: 'warning'  
                }) .then(async () => {
                    try {
                        let res = await util.httpGet(deleteTalentTagByIdUrl,{id:this.$route.query.id, xx:xx,(参数)}) // 接口及参数
                        this.$route.push({
                            path: '/xxx/xxx' // 跳转的页面路径
                        })
                    } catch (error){}
            	})
            }catch(err){}
    	}
    }
</script>