Vue与Element走过的坑。。。。带上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使用:
就能实时获取想要的数据。。。。。至于如何清空,直接将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
Vue与Element走过的坑。。。。带上Axios的更多相关文章
- element走过的坑
1.想要更改表头颜色,只要在el-table里引入 :header-cell-style="{background:'red'}" 2.el-form自定义表单验证 , 但是左边不 ...
- Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记
前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...
- SpringBoot + Vue + nginx项目部署(零基础带你部署)
一.环境.工具 jdk1.8 maven spring-boot idea VSVode vue 百度网盘(vue+springboot+nginx源码): 链接:https://pan.baidu. ...
- laravel5.4+vue+vux+element的环境搭配
最近因为项目的需要,需要搭配一个这样的环境.之前做过的东西没有这样用过,在网上找了半天不是过于简单就是根本行不通,自己踩了半天的坑,终于搭配成功. 首先下载laravel5.4,直接去官网一键安装包或 ...
- Vue(二十七)当前GitHub上排名前十的热门Vue项目(转载)
原文地址:https://my.oschina.net/liuyuantao/blog/1510726 1. ElemeFE/element tag:vue javascript components ...
- Vue学习-Element框架
今天学了一个基于Vue2.0的桌面端组件库Element,号称是全世界最流行的Vue UI框架.感觉学会了之后就变身大牛了有木有. 好了,不吹牛皮了. Element官方文档通俗易懂,框架什么的安装引 ...
- Vue发布过程中遇到坑,以及webpack打包优化
前言 这段时间,本人自己做了一个vue画面部署到自己的服务器上,发现运行速度慢的的惊人,虽然服务器很渣(本人没什么钱,只能租最差的服务器,主要是给自己学习用的),但是这样开发出来的网站简直不能用,所以 ...
- 【转】8年!我在OpenStack路上走过的坑。。。
8年!我在OpenStack路上走过的坑... 摘要: 2010年10月,OpenStack发布了第一个版本:上个月,发布了它的第18个版本Rocky.几年前气氛火爆,如今却冷冷清清.Rocky版本宣 ...
- 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...
随机推荐
- loadrunner 运行场景-Controller及Load Generators宿主主机优化
运行场景-Controller及Load Generators宿主主机优化 by:授客 QQ:1033553122 1. Load Generator宿主主机优化设置 win7以下:进入“控制面板” ...
- Hexo + Github 个人博客设置以及优化
原文地址: Hexo + Github 个人博客设置以及优化 一.博客设置 分类.标签云.关于等页面 在站点目录下分别执行: hexo new page "categories" ...
- SpringCloud+Feign环境下文件上传与form-data同时存在的解决办法
最近项目转型使用SpringCloud框架下的微服务架构,各微服务之间使用Feign进行调用.期间,发现若被调用方法涉及到文件上传且仅存在单个文件时,一切正常,代码片段如下: @RequestMapp ...
- 平板电脑安装Ubuntu教程
平板电脑安装Ubuntu教程-以V975w为例,Z3735系列CPU通用 最近尝试在昂达V975w平板电脑和intel stick中安装ubuntu,经过分析,发现存在一个非常大的坑.但因为这个坑,此 ...
- Conjob For hybris
1.Defining the Job 写conjob的逻辑:core包下当做service层(要继承AbstractJobPerformable<CronJobModel>) public ...
- 启动OpenVPN失败
启动OpenVPN失败 文:铁乐与猫 [root@yunwei_OpenVPN openvpn]# systemctl status openvpn ● openvpn.service - LSB: ...
- JQuery实现1024小游戏
最近用Jqery写了一个1024小游戏,由于是第一次写小游戏,所以就选了一个基础的没什么难度游戏.具体实现如下: 首先在开发时将整个游戏分成两层(自认为),底层是游戏的数据结构以及对数据的操作,上层是 ...
- Docker容器学习与分享12
Docker多主机管理 之前在一台Centos7上安装了Docker,如果是在多台主机上都安装Docker,用手动安装的方法不光效率低下,而且有可能出错,所以可以使用Docker Machine进行多 ...
- 【Beta Scrum】冲刺! 1/5
0. Alpha阶段遗留问题 项目 功能/页面 功能/页面 WEB端 图片在线编辑 文件上传跨域问题 app端 作业展示页面 1. Beta计划表 功能 说明 web端 登录 完成web端登录页面及功 ...
- JdbcTemolate类的介绍<一>
JdbcTemolate类的介绍 JdbcTemplate是Spring JDBC的核心类,封装了常见的JDBC的用法,同时尽量避免常见的错误.该类简化JDBC的操作,我们只需要书写提供SQL的代码和 ...