Vue与Element走过的坑。。。。带上Axios

news/2024/7/10 0:02:50 标签: vue, axios

1.Axios中post传参数组(java后端接收数组)

虽然源数据本身就是数组,但是传参时会自动变成key:数值或者服务器无法接收的对象,如下

如果不仔细看,很容易认为这两种情况没毛病。。(后端不背锅,哈哈)

第一种方式转化为数组:JSON.stringify

_this.item.push(row.id);//此处_this.item是数组
const params = new URLSearchParams();
params.append("item",JSON.stringify( _this.item));

第二种方式:此处贴上代码(解释不喜勿喷)

transformRequest: function (data) {
data = qs.stringify({
item: JSON.stringify(_this.item)
});
return data
}

最后真正传参的格式:

2.Element篇

1.el-table实现单击行且高亮执行赋值

css别忘了。。。。

2.el-table实现表头居中且内容居中

3.el-cascader获取点击的各级数据

val==》要接收的空数组(绑定的数据)opt==》需要遍历数据源

配合@change使用:

image

就能实时获取想要的数据。。。。。至于如何清空,直接将v-model绑定的数据清空即可。。。

4.el-menu动态生成(递归)

a.准备树形数据源(字段按个人需求,这里给出楼主的思路)

b.实现el-menu里包含的el-submenu(个人是直接抽取出来,通过props赋值)

index有个坑,,好像得变成字符串,所以加上“”,其实本来就是字符串。。。。这里使用得是递归思想生成dom

c:el-menu中使用

准备好第一步得数据源即可。。。。

5:el-table中使用el-switch(附带此时事件方法)

这里绑定数字得前面加上  :。。

6.树形表格,网上找了好多个人封装的,总是有些bug和其它问题,最后想到了vue版的Easyui,果然还是Easyui处理数据强大。。直接上图展示

此处数据源也是树形数据,采用递归完成,前面的图标是通过修改源码新增的几个。。

7.css问题

关于每个.vue中css,之前一直采用scope,,,但是打包之后发现失效了,,最后采用lang=scss方式,需要npm下载。。,最外层样式就是每个模板的顶级class括起来,这样也就避免了css全局污染啥的。。。。

8.跨域问题解决。。。

配置之后的请求缩写。。

配置config中index即可。。。但是产生了打包之后不存在跨域,,,,(难道打包之前把一个个请求的url修改。。。。那会封吧)

解决方案:

1.配置config中dev.env.js文件

这里/api就是开发环境刚刚代理跨域的地址

2.配置config中prod.env.js文件

这里配置一个相对路径,就能自由切换各种环境。。。。

3.设置请求时的路径,这里使用axios

这里没封装,简单的写一下。。。。主要第一行和第四行

此时请求的写法:

api没了,,此时就配好了开发时跨域请求和打包之后的不跨域,,,webpack打包时会自动切换。。。

暂时就这么多,好多碰到的问题暂时没想起来。。。。。。


http://www.niftyadmin.cn/n/1301311.html

相关文章

springcloud2+gateway网关配置中心2(包含熔断,jwt认证,限流)

下面介绍1未讲完的网关功能 1重试功能,配置如下 这里可以不写实现类,采用默认的方式配置,然后发送一个http的GET请求,试着断开服务端查看后台: 证明配置正确,起作用了! 2Jwt拦截器过滤 直接配置…

Mac终端提示Could not determine audit condition

文章转载自:https://blog.csdn.net/KingOfOnePiece/article/details/82149502 原因:自己修改了系统变量 结果:导致终端显示进程已完成 错误信息:login: Could not determine audit condition [Process completed] …

vue组件通信--注意事项及经验总结

组件间的通信是是实际开发中非常常用的一环,如何使用对项目整体设计、开发、规范都有很实际的的作用,我在项目开发中对此深有体会,总结下vue组件间通信的几种方式,讨论下各自的使用场景 文章对相关场景预览 父->子组件间的数…

关于ribbon的小测试

本文主要目的是解决实际工作中遇到问题,如何说服老板做cloud微服务项目!!! 现在社会数据说话,对一个外行讲再多的cloud的优势,还不如来个图形对比实在,本机测试,让数据说话 关于clo…

一种简洁的悬浮弹窗设计

需引入:FontAwesome,用于图标 效果截图: CSS: .div1 { position: absolute; right: 16px; top: 10%; z-index: 12; }.div2 { border-radius: 10px 0 0 10px; width: 25px; height: 25px; float: left; cursor: pointer; background-color: rgb(0, 198, 255); }.div2>i { fo…

CocosCreator使用自定义shader

文章转载自:https://blog.csdn.net/xufeng0991/article/details/72973664 为了减少游戏资源,游戏中免不了会使用一些shader,下面是一个将图片变灰shader,以此来看看如何在cocos creator中使用和管理shader。 shader文件管理 在…

spring+cloud_alibaba简单学习一

cloud服务做了有些时间(一直没上线),随着cloud服务被各种私有化闭源后,担心gateway2网关闭源,euraka中心闭源,各种闭源。。。。想找下阿里大佬有没有人搞这方面的(同事有人说有)&…

vue 项目实战 (生命周期钩子)

开篇先来一张图 下图是官方展示的生命周期图 Vue实例的生命周期钩子函数(8个) 1. beforeCreate   刚 new了一个组件,无法访问到数据和真实的dom,基本上这个好像不能干啥 2. created  …