Vue前端怎么根据后端api删除数据
各位大佬好，本人非程序员也不是计算机专业的，就是业余爱好学学前端。目前遇到个问题就是我使用node+vue做一个记账的页面，然后想通过图1这个删除按钮来删除这一条数据。增加修改查询我知道，但是不知道怎么删除，我后端删除语句是图2。
请问下各位大佬怎么通过这个id来删除数据
这种简单的你问copilot 或者gpt都可以呀，const sql = 'DELETE FROM xf_mx WHERE id = ?'; 你修改的时候是用哪个值来判定的删除就用哪个值删除啊 给delete绑一个id上去就行了，在语句里拼接 前端的表格数据应该用的是数组绑定的吧，直接array.splice(index, 1)就行。或者也可以做成删除之后直接重新查询 坏人。丶 发表于 2024-1-16 00:03
这种简单的你问copilot 或者gpt都可以呀，const sql = 'DELETE FROM xf_mx WHERE id ...
这个后端我知道啊前端调用后端接口通过ID删除我就不知道了 深巷丶 发表于 2024-1-16 07:57
前端的表格数据应该用的是数组绑定的吧，直接array.splice(index, 1)就行。或者也可以做成删除之后直接重新 ...
array.splice(index, 1)这个没怎么看懂 我前端的表格用的是el-table。
它给的实例是这样，我不是很能理解如何把后端获取到的id绑定的table的id
<el-table :data="filterTableData" style="width: 100%">
<el-table-column label="Date" prop="date" />
<el-table-column label="Name" prop="name" />
<el-table-column align="right">
<template #header>
<el-input v-model="search" size="small" placeholder="Type to search" />
</template>
<template #default="scope">
<el-button size="small" @click="handleEdit(scope.$index, scope.row)"
>Edit</el-button
>
<el-button
size="small"
type="danger"
@click="handleDelete(scope.$index, scope.row)"
>Delete</el-button
>
</template>
</el-table-column>
</el-table> 侃遍天下无二人 发表于 2024-1-16 01:16
给delete绑一个id上去就行了，在语句里拼接
主要是前端我不知道怎么删除,我是这么写，但是这么好像有不对
<el-button size="small" type="danger" @click="delxfmx(scope.$index, scope.row.id)">Delete</el-button>
//删除数据
delxfmx() {
axios
.get("http://127.0.0.1:8000/jz/delxfmx?id={id}")
.then((res) => {
console.log(res.data);
})
.catch((err) => {
console.log("获取数据失败" + err);
});
}, ahehaoyu 发表于 2024-1-16 08:07
array.splice(index, 1)这个没怎么看懂 我前端的表格用的是el-table。
它给的实例是这样，我不是很能理 ...
首先，el-table通过:data双向绑定的变量是filterTableData对吧，这个变量肯定是一个数组（Array）类型，内容类似于[{'id': 22, 'type': '测试', 'money': 12.0}]，这样子对吧。
其次，通过插槽default的scope，可以把当前行、列、index数据传递给你，看下官网示例：https://element.eleme.cn/#/zh-CN/component/table#zi-ding-yi-lie-mo-ban
最后，根据scope.row获取到的对象里的id，调用接口删除，删除成功后两个选择：
①对filterTableData使用splice(index, 1)，意思是删除数组里下标为index的一个元素，具体splice的用法你自己查一下
②直接重新查询一次数据，注意排序不要改变