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上添加 ...
随机推荐
- 泛化之美--C++11可变模版参数的妙用
1概述 C++11的新特性--可变模版参数(variadic templates)是C++11新增的最强大的特性之一,它对参数进行了高度泛化,它能表示0到任意个数.任意类型的参数.相比C++98/03 ...
- 【redis专题(3)】命令语法介绍之link
通过链表结构可以模仿队列结构与堆栈结构:关于队列结构和堆栈结构可以查看https://www.zybuluo.com/a5635268/note/290475 增 lpush key value1 v ...
- Linux 下查看系统当前登录用户信息
当你新登录一个主机,过着管理一个主机,这时候你就需要这些命令来进行查看了: 1. w : Show who is logged on and what they are doing. w [optio ...
- linux E325: 注意 发现交换文件 "*.swp" 解决方法
今天在linux里修改脚本文件时,不小心非正常关闭了脚本文件,再次编辑时,每次都提示 如下错误: E325: 注意发现交换文件 ".bqh.sh.swp" 所有者: root 日期 ...
- 一个比较全面 的web项目实战学习
一个比较全面 的web项目实战学习:http://www.cnblogs.com/jikey/p/3613082.html
- Java面试——微服务
1.什么是微服务? 就目前而言,对于微服务业界并没有一个统一的,标准的定义. 但通常而言,微服务架构是一种架构模式或者说是一种架构风格,它提倡将单一应用程序划分一组小的服务,每个服务运行在其独立 ...
- 【ArcGIS】安装ArcEngine 10的顺序
Step1.安装VS 2010Step2.安装ArcGIS Desktop(不可跳过这步),如果直接安装ArcEngine,将出现如下错误提示因此必须首先安装ArcGIS Desktop或者ArcGI ...
- centos7下安装docker(9.3容器对资源的使用限制-Block IO))
Block IO:指的是磁盘的读写,docker 可以通过设置权重,限制bps和iops的方式控制容器读写磁盘的带宽 注:目前block IO限额只对direct IO(不使用文件缓存)有效. 1.B ...
- Hue添加Spark notebook
参考自https://blogs.msdn.microsoft.com/pliu/2016/06/18/run-hue-spark-notebook-on-cloudera/ 说明 使用Clouder ...
- Spring4.2+SpringMVC+Mybatis3.4的集成(转-)
文章转自 http://blog.csdn.net/jimolangge123/article/details/49210363 首先说明一下Web.xml中配置项的执行过程: <context ...