2018-8-24-vue的删除代码

最新推荐文章于 2024-02-11 18:05:14 发布

养柱专业户

最新推荐文章于 2024-02-11 18:05:14 发布

阅读量681

点赞数

CC 4.0 BY-SA版权

分类专栏： 003

本文链接：https://blog.youkuaiyun.com/haodiaoer/article/details/82014984

003 专栏收录该内容

55 篇文章

订阅专栏

本文详细介绍如何在Vue项目中实现数据的删除操作，包括使用Element UI的按钮组件触发删除，通过弹窗确认删除信息，以及调用后端API完成数据删除并刷新表格数据的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、删除代码按钮

<el-button v-if="$route.meta.btns.deleteBtn" size="mini" type="danger" icon="el-icon-delete" @click="deleteData">删除
</el-button>

二、具体的删除函数

deleteData: function () {
    const _self = this;
    _self.$confirm("是否删除此信息", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning"
    }).then(() => {
        const rows = this.getSelectRows();
        if (rows.length !== 1) {
            this.$error("请选择一行数据");
            return;
        }

        let taskCode = rows[0].taskCode;

        _self.$http.post(_self.deleteUrl,
            {"taskCode": taskCode})
            .then(function (response) {
                if (response.success) {
                    _self.$success(response.msg);
                    _self.$refs.table.refresh();
                } else {
                    _self.$error(response.msg);
                }
            }).catch(function (error) {
            _self.$error(error.message);
        })
    }).catch(() => {
        return false;
    })
}

三、在return中声明

deleteUrl: "/loan/jobTaskAction.do?_md=deleteByTaskCode",