在做后台管理时，使用了vue搭配elementUI，请求方法使用了axios插件，在使用下拉框时，因为我需要获取选中的选项中的其他值，因此需要传入对象。对select下拉框的文档没有读的很仔细，百度过几篇文章，也没有理解他们表达的意思，然后自己又去看文档，把他的属性看了几遍，忽然就来了灵感，尝试了一两次，哇，原来是这样做，爽歪歪，真的是书读百遍其义自见
1.elementui中的select下拉框为对象
- 当select下拉框中的value传入的是对象时，在你没写对属性时，下拉框选中的值就会错乱
<template>
<el-select v-model="seletedOption" value-key="name" style="width: 72%" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.express"
:value="item"
:label="item.name"
></el-option>
</el-select>
</template>
<script>
export default{
data() {
return {
selectedOption: '',
options: [
{
id: 0,
name: '11',
title: 'one'
},
{
id: 1,
name: '22',
title: 'two'
}
]
}
}
}
</script>- 官网中下拉框有写这个属性，多读几遍，就有了新的发现
这个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
- 使用，我这里实现的是地址二级选择
<template>
<el-cascader
style="width: 68%"
size="large"
:options="options"
v-model="selectedCity"
placeholder="请选择区域"
></el-cascader>
</template>
<script>
import { provinceAndCityData,CodeToText } from 'element-china-area-data'
export default{
data() {
return {
options: provinceAndCityData,
selectedCity: [],
}
},
method: {
handleSelected() {
/* 这里他返回的是选中的编号，需要进行编号转文字 */
console.log(CodeToText[this.selectedCity[0]]);
}
}
}
</script>正在努力学习中，若对你的学习有帮助，留下你的印记呗（点个赞咯^_^）
