博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vue与Element走过的坑。。。。带上Axios
阅读量:6167 次
发布时间:2019-06-21

本文共 1554 字,大约阅读时间需要 5 分钟。

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使用:

就能实时获取想要的数据。。。。。至于如何清空,直接将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打包时会自动切换。。。

 

暂时就这么多,好多碰到的问题暂时没想起来。。。。。。不喜勿喷(才刚刚接触一个月的vue)。。

 

2018-10-15 16:00

闹了一个乌龙。。。上次把页面定制了一下,引用的是别人封装的,结果每篇文章都带有他的签名。。。。醉了。。已修复。。

欢迎进群学习交流(927465926) Full Stack engineer

 

 

转载于:https://www.cnblogs.com/wtzl/p/9791398.html

你可能感兴趣的文章
实现一些字符串操作标准库函数、解决一些字符串问题
查看>>
高级Unix命令
查看>>
解析AS3代码规范
查看>>
关于SaveChanges
查看>>
php7扩展开发 一 获取参数
查看>>
处女座与复读机
查看>>
Laravel 5.2数据库--迁移migration
查看>>
ExtJs Extender controls 不错的例子
查看>>
html的基础知识
查看>>
一个菜鸟正在用SSH写一个论坛(2)
查看>>
Mybatis Sql片段的应用
查看>>
突发奇想20150126
查看>>
郁闷,郁闷啊
查看>>
Nginx + CGI/FastCGI + C/Cpp
查看>>
学习笔记------jsp页面与jsp标记
查看>>
DS博客作业02--线性表
查看>>
第三届ACM山东省赛I题_Chess_STL
查看>>
《C++ Primer》读书笔记 第一章
查看>>
transition与visibility与display
查看>>
14种网页jQuery和css3特效插件代码演示
查看>>