前端vue如何对接接口,如何传参,传id,实现删除,父子组件传值等等功能?
2023-09-11 14:19:17 时间
两个接口对比
可以看到 后端给的接口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一下简单明了
如果觉得本文章对于您有些许帮助,可以点击关注,分享更多前端初学者知识~
相关文章
- import Vue from 'vue';
- (尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)
- [转] vue自定义组件(通过Vue.use()来使用)即install的使用
- 【Vue】你必须要知道的vue中v-on指令的修饰符
- Vue-Socket.io跨域问题 has been blocked by CORS policy: No 'Access-Control-Allow-Origin' Mentalflow解决思路
- vue 的 起手式
- Vue - 搜索关键字标红高亮(用户输入关键词搜索后,在搜索结果的列表标题上匹配并标红加粗)怎么使内容文本标红高亮的最详细教程,Nuxt.js uni-app 也适用,搜索功能及搜索结果关键字高亮源码
- nginx部署vue项目路径添加前缀
- Vue——vue中的双向数据绑定
- 一文带你理解vue创建一个后台管理系统流程(Vue+Element)
- vue 的组件查找
- Vue 组件化
- Vue 动态粒子特效(vue-particles)
- 【Vue】vue组件和vue插件的创建和使用(底部栏组件、Toast 和 Notify通知插件)
- 【Vue】vue基础语法——computed计算、watch监听、class和style,最后回顾JavaScript里面的常用方法(vue学习day03)
- vue学习笔记六:Jquery VS Vue之网络请求明细对照
- vue.config.js 配置参考
- 一个vue请求接口渲染页面的例子
- vue封装一个swiper组件
- Vue-cli 4在vue.config.js中配置别名
- vue组件和插件的区别
- Vue-插槽的使用
- Vue学习第27天——路由vue-router的详解及案例练习
- Vue学习第19天——vue脚手架配置代理
- Vue使用Element-UI的table组件和后端接口进行数据交互(包含前后端代码)