摘要:在做后台管理时,使用了搭配,请求方法使用了插件,在使用下拉框时,因为我需要获取选中的选项中的其他值,因此需要传入对象。
在做后台管理时,使用了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开发移动端管理后台
画三角形
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址: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...
摘要:获取字符串中出现次数最多的字符。去掉字符串中的所有空格中对象数组按对象属性排序 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...
摘要:简单点说呢,就是与后端的数据交互和怎么把数据展示出来,用到的资源主要是和,其它参考插件使用。当时,加载中的提示就会出现。后端返回的数据如上图,并不是所有的字段都是可以进行搜索的字段。 1.前言 今天要做的,就是在上一篇文章的基础上,进行功能页面的开发。简单点说呢,就是与后端的数据交互和怎么把数据展示出来,用到的资源主要是element-ui和vue-resource,其它参考(vue-...
摘要:往往定义组件的构造器后,不需要手动的进行初始化,而是在其他组件的模板中当成标签来使用,这时候需要调用注册成组件。这样设计的目的是防止从子组件意外改变父级组件的状态,从而导致应用的数据流向难以理解。 上节说到组件https://segmentfault.com/a/1190000009236700,这一节继续来学习组件: 原文博客地址,欢迎学习交流:点击预览从github上获取本文代码:...
阅读 1459·2021-09-24 10:38
阅读 1449·2021-09-22 15:15
阅读 3037·2021-09-09 09:33
阅读 877·2019-08-30 11:08
阅读 618·2019-08-30 10:52
阅读 1236·2019-08-30 10:52
阅读 2294·2019-08-28 18:01
阅读 499·2019-08-28 17:55