前端vue如何对接接口,如何传参,传id,实现删除,父子组件传值等等功能?
可以看到后端给的接口id和handle是必传(必选:是),如果参数不是必选就可以不传(一般id是必传的)如果是父子组件传值,父组件data中定义一个参数。把id通过点击对应的按钮赋值给定义的参数,如果依旧不能实现,控制台log一下简单明了。子组件通过props接收。把参数绑定到组件上,...
·
两个接口对比
可以看到 后端给的接口id和handle是必传(必选:是),如果参数不是必选就可以不传(一般id是必传的)
html代码
<el-table-column label="操作">
<template v-slot="{ row }">
<el-button
type="text"
style="color: #246deb"
@click.stop="recoverFn(row)">恢复</el-button>
<el-button type="text" style="color: #ff4d4f" @click="deleteFn(row)">删除</el-button>
</template>
</el-table-column>
js代码
恢复按钮
//恢复按钮
recoverFn(scope) {
let recovDate = {
handle: 1,
id: scope.id,
};
console.log("恢复scope", scope);
recyclingHandlePost(recovDate).then((res) => {
console.log("恢复按钮", res);
if (res.data.code == 666) {
this.$message.success(res.data.msg);
this.recyclingList(); //调接口,回收站列表
} else {
this.$message.error(res.data.msg);
}
});
},
删除按钮
//删除按钮
deleteFn(scope) {
let delData = {
handle: 2,
id: scope.id,
};
this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
recyclingHandlePost(delData).then((res) => {
console.log("删除按钮", res);
if (res.data.code == 666) {
this.$message.success(res.data.msg);
this.recyclingList(); //调接口,回收站列表
} else {
this.$message.error(res.data.msg);
}
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
//删除-> 纯前端写法(可以忽视)
// console.log(row)
// // 第一种
// // var index = this.tableData.findIndex((item) => {
// // if (item.id == id) {
// // return true;
// // }
// // });
// // this.tableData.splice(index, 1);
// // 第二种
// this.tableData = this.tableData.filter(
// item => item.collectionData != row.collectionData
// )
},
如果是父子组件传值
父组件data中定义一个参数
把id通过点击对应的按钮赋值给定义的参数,
把参数绑定到组件上,
子组件通过props接收
如果依旧不能实现,控制台log一下简单明了
如果觉得本文章对于您有些许帮助,可以点击关注,分享更多前端初学者知识~
更多推荐
已为社区贡献1条内容
所有评论(0)