vue項目中使用element-ui下拉框選項值為對象時報錯

Drummor 發(fā)布于2019-08-26 10:57 / 2829人閱讀

摘要：在做后臺管理時，使用了搭配，請求方法使用了插件，在使用下拉框時，因為我需要獲取選中的選項中的其他值，因此需要傳入對象。

在做后臺管理時，使用了vue搭配elementUI，請求方法使用了axios插件，在使用下拉框時，因為我需要獲取選中的選項中的其他值，因此需要傳入對象。對select下拉框的文檔沒有讀的很仔細，百度過幾篇文章，也沒有理解他們表達的意思，然后自己又去看文檔，把他的屬性看了幾遍，忽然就來了靈感，嘗試了一兩次，哇，原來是這樣做，爽歪歪，真的是書讀百遍其義自見

1.elementui中的select下拉框為對象

當select下拉框中的value傳入的是對象時，在你沒寫對屬性時，下拉框選中的值就會錯亂

官網中下拉框有寫這個屬性，多讀幾遍，就有了新的發(fā)現(xiàn)

這個value-key指的是對象中你要渲染或者說是你要選中的鍵值，是直接寫死的，比如：我這里要渲染要選中的就是name對應的值，在我沒有設置value-key這個屬性但是卻直接傳入el-option中的value為對象時，發(fā)現(xiàn)即使selectedOption為空，他在頁面上也有顯示值

2.axios中捕獲異常信息

開始我直接打印err，發(fā)現(xiàn)他打印的信息沒有我想要的報錯信息，都是些js文件選項

但是，當你打印err.response時就會有你想要的信息了

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

3.關于自定義模態(tài)框的布局

以前也有寫過自定義模態(tài)框，但是有點瑕疵，我沒去修改，最近看著elementUI的對話框，終于發(fā)現(xiàn)了導致那點瑕疵的原因了

在自定義模態(tài)框時，在最外層會有一層半透明的陰影層，我為了里面的內容水平垂直居中，就在這半透明層使用了flex布局，但是，使用后，在瀏覽器中f12后，然后一直把頁面變小，你就發(fā)現(xiàn)，模態(tài)框的內容被遮擋了，即使有滾動條，也無法滑動至完全看到模態(tài)框的內容

所以借鑒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級聯(lián)選擇器來實現(xiàn)地址級聯(lián)選擇

el-cascader可以實現(xiàn)二級或者三級地址級聯(lián)選擇

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

然后是引入json數據

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

provinceAndCityData是省市二級聯(lián)動數據（不帶“全部”選項）
regionData是省市區(qū)三級聯(lián)動數據（不帶“全部”選項）
provinceAndCityDataPlus是省市區(qū)三級聯(lián)動數據（帶“全部”選項）
regionDataPlus是省市區(qū)三級聯(lián)動數據（帶“全部”選項）
"全部"選項綁定的value是空字符串""
CodeToText是個大對象，屬性是區(qū)域碼，屬性值是漢字 用法例如：CodeToText["110000"]輸出北京市
TextToCode是個大對象，屬性是漢字，屬性值是區(qū)域碼 用法例如：TextToCode["北京市"].code輸出110000,TextToCode"北京市".code輸出110100,TextToCode"北京市"["朝陽區(qū)"].code輸出110105

使用，我這里實現(xiàn)的是地址二級選擇

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

往期推薦：

實現(xiàn)單行及多行文字超出后加省略號

判斷iOS和Android及PC端

使用vue開發(fā)移動端管理后臺

畫三角形

云服務器 GPU云服務器 html下拉框選項 tomcat啟動時報錯 js中下拉框變灰 js中下拉框選中事件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106890.html

開發(fā)中遇到的問題總結

摘要：獲取字符串中出現(xiàn)次數最多的字符。去掉字符串中的所有空格中對象數組按對象屬性排序 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
開發(fā)中遇到的問題總結

摘要：獲取字符串中出現(xiàn)次數最多的字符。去掉字符串中的所有空格中對象數組按對象屬性排序 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
webpack+vue項目實戰(zhàn)（四，前端與后端的數據交互和前端展示數據）

摘要：簡單點說呢，就是與后端的數據交互和怎么把數據展示出來，用到的資源主要是和，其它參考插件使用。當時，加載中的提示就會出現(xiàn)。后端返回的數據如上圖，并不是所有的字段都是可以進行搜索的字段。 1.前言今天要做的，就是在上一篇文章的基礎上，進行功能頁面的開發(fā)。簡單點說呢，就是與后端的數據交互和怎么把數據展示出來，用到的資源主要是element-ui和vue-resource，其它參考（vue-...

Yumenokanata 2019-08-20 17:47 評論0 收藏0
理解vue中的組件（二）

摘要：往往定義組件的構造器后，不需要手動的進行初始化，而是在其他組件的模板中當成標簽來使用，這時候需要調用注冊成組件。這樣設計的目的是防止從子組件意外改變父級組件的狀態(tài)，從而導致應用的數據流向難以理解。上節(jié)說到組件https://segmentfault.com/a/1190000009236700，這一節(jié)繼續(xù)來學習組件：原文博客地址，歡迎學習交流:點擊預覽從github上獲取本文代碼：...

Nino 2019-08-23 12:11 評論0 收藏0