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

在做后台管理时,使用了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>
  • 官网中下拉框有写这个属性,多读几遍,就有了新的发现
clipboard.png

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

2.axios中捕获异常信息

  • 开始我直接打印err,发现他打印的信息没有我想要的报错信息,都是些js文件选项
clipboard.png
  • 但是,当你打印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
  • 使用,我这里实现的是地址二级选择
clipboard.png
<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>
正在努力学习中,若对你的学习有帮助,留下你的印记呗(点个赞咯^_^)
阅读 1.9k

推荐阅读