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>

• 官網中下拉框有寫這個屬性，多讀幾遍，就有了新的發現

這個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>

正在努力學習中，若對你的學習有幫助，留下你的印記唄（點個贊咯^_^）

• 往期推薦：

  • 實現單行及多行文字超出後加省略號
  • 判斷iOS和Android及PC端
  • 使用vue開發移動端管理後臺
  • 畫三角形