前端与后端联调接口之----刪除功能

最新推荐文章于 2024-04-25 16:21:26 发布

_chang.

最新推荐文章于 2024-04-25 16:21:26 发布

阅读量303

点赞数

文章标签：前端 vue.js ui

本文链接：https://blog.csdn.net/m0_66226018/article/details/132060724

版权

Vue项目中使用axios进行数据删除操作的示例，涉及表格组件和删除确认流程。

摘要由CSDN通过智能技术生成

先是api的接口

import request from "../http";//引的是axios的二次封装
 
//删除接口
export function getDelete(data) {
    return request({
        url:"/api/getDelete",
        method:"post",
        data:data
    })
}

然后是我们的删除页面以及调用接口的方法

代码：

<template>
    <div>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column label="日期" width="120">
                <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="address" label="地址" show-overflow-tooltip>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button type="text" @click="handleClickdelete(scope.row.id)" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
  
<script>
import { getDelete } from "@/api";
export default {
    data() {
        return {
            tableData: [],
        }
    },

    methods: {
        handleClickdelete(id) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const params = {
                    id: id,
                }
                getDelete(params).then((res) => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    //重新调用数据
                    this.getList();
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    }
}
</script>

现在的代码将怎样获取数据删除了，大家自己添加