成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Drummor / 2849人閱讀

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

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

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

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

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

2.axios中捕獲異常信息

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

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

.catch(err => {
  console.log(err);
  console.log(err.response);
})
3.關(guān)于自定義模態(tài)框的布局

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

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

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

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



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

往期推薦：

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

判斷iOS和Android及PC端

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

畫三角形

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/106890.html

相關(guān)文章

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

    摘要：獲取字符串中出現(xiàn)次數(shù)最多的字符。去掉字符串中的所有空格中對象數(shù)組按對象屬性排序 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 評論0 收藏0

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

    摘要：獲取字符串中出現(xiàn)次數(shù)最多的字符。去掉字符串中的所有空格中對象數(shù)組按對象屬性排序 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 評論0 收藏0

  • webpack+vue項目實戰(zhàn)（四，前端與后端的數(shù)據(jù)交互和前端展示數(shù)據(jù)）

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

    Yumenokanata 評論0 收藏0

  • 理解vue中的組件（二）

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

    Nino 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<