vue项目中使用element-ui下拉框选项值为对象时报错

Drummor 发布于2019-08-26 10:57 / 2469人阅读

摘要：在做后台管理时，使用了搭配，请求方法使用了插件，在使用下拉框时，因为我需要获取选中的选项中的其他值，因此需要传入对象。

在做后台管理时，使用了vue搭配elementUI，请求方法使用了axios插件，在使用下拉框时，因为我需要获取选中的选项中的其他值，因此需要传入对象。对select下拉框的文档没有读的很仔细，百度过几篇文章，也没有理解他们表达的意思，然后自己又去看文档，把他的属性看了几遍，忽然就来了灵感，尝试了一两次，哇，原来是这样做，爽歪歪，真的是书读百遍其义自见

1.elementui中的select下拉框为对象

当select下拉框中的value传入的是对象时，在你没写对属性时，下拉框选中的值就会错乱

官网中下拉框有写这个属性，多读几遍，就有了新的发现

这个value-key指的是对象中你要渲染或者说是你要选中的键值，是直接写死的，比如：我这里要渲染要选中的就是name对应的值，在我没有设置value-key这个属性但是却直接传入el-option中的value为对象时，发现即使selectedOption为空，他在页面上也有显示值

2.axios中捕获异常信息

开始我直接打印err，发现他打印的信息没有我想要的报错信息，都是些js文件选项

但是，当你打印err.response时就会有你想要的信息了

.catch(err => {
  console.log(err);
  console.log(err.response);
})

3.关于自定义模态框的布局

以前也有写过自定义模态框，但是有点瑕疵，我没去修改，最近看着elementUI的对话框，终于发现了导致那点瑕疵的原因了

在自定义模态框时，在最外层会有一层半透明的阴影层，我为了里面的内容水平垂直居中，就在这半透明层使用了flex布局，但是，使用后，在浏览器中f12后，然后一直把页面变小，你就发现，模态框的内容被遮挡了，即使有滚动条，也无法滑动至完全看到模态框的内容

所以借鉴elementui中的对话框，不能使用flex布局

/* 最外层 */
.customModal{
  position: fixed;
  overflow-y: scroll;
  width: 100%;
  height: 100vh;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, .6);
  z-index: 1000;
}
/* 内容层 */
.modal{
  position: relative;
  margin: 15vh auto 50px;
  width: 600px;
  min-height: 242px;
  background: #fff;
  border-radius: 3px;
}

4.js时间戳

/* new Date()获取的时间戳是以毫秒为单位，我这里后台返回的是以秒为单位 */
let time = Math.floor(new Date() / 1000);

5.利用elementUI中的el-cascader级联选择器来实现地址级联选择

el-cascader可以实现二级或者三级地址级联选择

首先使用npm安装element-china-area-dataelement-china-area-data

然后是引入json数据

import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from "element-china-area-data"

provinceAndCityData是省市二级联动数据（不带“全部”选项）
regionData是省市区三级联动数据（不带“全部”选项）
provinceAndCityDataPlus是省市区三级联动数据（带“全部”选项）
regionDataPlus是省市区三级联动数据（带“全部”选项）
"全部"选项绑定的value是空字符串""
CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText["110000"]输出北京市
TextToCode是个大对象，属性是汉字，属性值是区域码 用法例如：TextToCode["北京市"].code输出110000,TextToCode"北京市".code输出110100,TextToCode"北京市"["朝阳区"].code输出110105

使用，我这里实现的是地址二级选择

正在努力学习中，若对你的学习有帮助，留下你的印记呗（点个赞咯^_^）

往期推荐：

实现单行及多行文字超出后加省略号

判断iOS和Android及PC端

使用vue开发移动端管理后台

画三角形

服务器托管 idc机房托管 html下拉框选项 tomcat启动时报错 js中下拉框变灰 js中下拉框选中事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106890.html

开发中遇到的问题总结

摘要：获取字符串中出现次数最多的字符。去掉字符串中的所有空格中对象数组按对象属性排序 VUE 1、vue——解决You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...

wenshi11019 2019-08-23 16:03 评论0 收藏0
开发中遇到的问题总结

摘要：获取字符串中出现次数最多的字符。去掉字符串中的所有空格中对象数组按对象属性排序 VUE 1、vue——解决You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...

Yuqi 2019-08-30 15:56 评论0 收藏0
理解vue中的组件（二）

摘要：往往定义组件的构造器后，不需要手动的进行初始化，而是在其他组件的模板中当成标签来使用，这时候需要调用注册成组件。这样设计的目的是防止从子组件意外改变父级组件的状态，从而导致应用的数据流向难以理解。上节说到组件https://segmentfault.com/a/1190000009236700，这一节继续来学习组件：原文博客地址，欢迎学习交流:点击预览从github上获取本文代码：...

Nino 2019-08-23 12:11 评论0 收藏0
webpack+vue项目实战（四，前端与后端的数据交互和前端展示数据）

摘要：简单点说呢，就是与后端的数据交互和怎么把数据展示出来，用到的资源主要是和，其它参考插件使用。当时，加载中的提示就会出现。后端返回的数据如上图，并不是所有的字段都是可以进行搜索的字段。 1.前言今天要做的，就是在上一篇文章的基础上，进行功能页面的开发。简单点说呢，就是与后端的数据交互和怎么把数据展示出来，用到的资源主要是element-ui和vue-resource，其它参考（vue-...

Yumenokanata 2019-08-20 17:47 评论0 收藏0