松鼠乐园 松鼠乐园
  • 注册
  • 登录
  • 首页
  • 快捷入口
    • Vue
    • Tensorflow
    • Springboot
    • 语言类
      • CSS
      • ES5
      • ES6
      • Go
      • Java
      • Javascript
    • 工具类
      • Git
      • 工具推荐
    • 服务器&运维
      • Centos
      • Docker
      • Linux
      • Mac
      • MySQL
      • Nginx
      • Redis
      • Windows
    • 资源类
      • 论文
      • 书籍推荐
      • 后端资源
      • 前端资源
      • html网页模板
      • 代码
    • 性能优化
    • 测试
  • 重大新闻
  • 人工智能
  • 开源项目
  • Vue2.0从零开始
  • 广场
首页 › Vue › Vue与Element走过的坑……带上Axios

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

迦娜王
1年前Vue
321 0 0

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

出处:http://www.cnblogs.com/wtzl/p/9791398.html

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

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

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

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

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

第一种方式转化为数组: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

}

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

最后真正传参的格式:

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

2.Element篇

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

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

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

css别忘了。。。。

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

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

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

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

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

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

配合@change使用:

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

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

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

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

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

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

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

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

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

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

c:el-menu中使用

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

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

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

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

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

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

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

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

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

7.css问题

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

8.跨域问题解决。。。

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

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

配置之后的请求缩写。。

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

解决方案:

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

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

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

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

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

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

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

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

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

此时请求的写法:

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

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

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

0
Vue起步系列6:Vue计算属性的getter和setter
上一篇
前端 Vue.js 快速开发微信小程序,基于 Vue 的小程
下一篇
评论 (0)

请登录以参与评论。

现在登录
聚合文章
在Gitee收获近 5k Star,更新后的Vue版RuoYi有哪些新变化?
2月前
vue3.x reactive、effect、computed、watch依赖关系及实现原理
2月前
Vue 3 新特性:在 Composition API 中使用 CSS Modules
2月前
新手必看的前端项目去中心化和模块化思想
2月前
标签
AI AI项目 css docker Drone Elaticsearch es5 es6 Geometry Go gru java Javascript jenkins lstm mysql mysql优化 mysql地理位置索引 mysql索引 mysql规范 mysql设计 mysql配置文件 mysql面试题 mysql高可用 nginx Redis redis性能 rnn SpringBoot Tensorflow tensorflow2.0 UI设计 vue vue3.0 vue原理 whistle ZooKeeper 开源项目 抓包工具 日志输出 机器学习 深度学习 神经网络 论文 面试题
相关文章
在Gitee收获近 5k Star,更新后的Vue版RuoYi有哪些新变化?
vue3.x reactive、effect、computed、watch依赖关系及实现原理
Vue 3 新特性:在 Composition API 中使用 CSS Modules
新手必看的前端项目去中心化和模块化思想
松鼠乐园

资源整合,创造价值

小伙伴
墨魇博客 无同创意
目录
重大新闻 Centos CSS Docker ES5 ES6 Go Java Javascript Linux Mac MySQL Nginx Redis Springboot Tensorflow Vue Vue2.x从零开始 Windows 书籍推荐 人工智能 前端资源 后端资源 壁纸 开源项目 测试 论文
Copyright © 2018-2021 松鼠乐园. Designed by nicetheme. 浙ICP备15039601号-4
  • 重大新闻
  • Centos
  • CSS
  • Docker
  • ES5
  • ES6
  • Go
  • Java
  • Javascript
  • Linux
  • Mac
  • MySQL
  • Nginx
  • Redis
  • Springboot
  • Tensorflow
  • Vue
  • Vue2.x从零开始
  • Windows
  • 书籍推荐
  • 人工智能
  • 前端资源
  • 后端资源
  • 壁纸
  • 开源项目
  • 测试
  • 论文
热门搜索
  • jetson nano
  • vue
  • java
  • mysql
  • 人工智能
  • 人脸识别
迦娜王
坚持才有希望
1224 文章
33 评论
235 喜欢
  • 0
  • 0
  • Top