資訊專欄INFORMATION COLUMN
摘要：在做后臺(tái)管理時(shí)，使用了搭配，請求方法使用了插件，在使用下拉框時(shí)，因?yàn)槲倚枰@取選中的選項(xiàng)中的其他值，因此需要傳入對象。
在做后臺(tái)管理時(shí)，使用了vue搭配elementUI，請求方法使用了axios插件，在使用下拉框時(shí)，因?yàn)槲倚枰@取選中的選項(xiàng)中的其他值，因此需要傳入對象。對select下拉框的文檔沒有讀的很仔細(xì)，百度過幾篇文章，也沒有理解他們表達(dá)的意思，然后自己又去看文檔，把他的屬性看了幾遍，忽然就來了靈感，嘗試了一兩次，哇，原來是這樣做，爽歪歪，真的是書讀百遍其義自見1.elementui中的select下拉框?yàn)閷ο?/b>
當(dāng)select下拉框中的value傳入的是對象時(shí)，在你沒寫對屬性時(shí)，下拉框選中的值就會(huì)錯(cuò)亂
官網(wǎng)中下拉框有寫這個(gè)屬性，多讀幾遍，就有了新的發(fā)現(xiàn)
這個(gè)value-key指的是對象中你要渲染或者說是你要選中的鍵值，是直接寫死的，比如：我這里要渲染要選中的就是name對應(yīng)的值，在我沒有設(shè)置value-key這個(gè)屬性但是卻直接傳入el-option中的value為對象時(shí)，發(fā)現(xiàn)即使selectedOption為空，他在頁面上也有顯示值
2.axios中捕獲異常信息開始我直接打印err，發(fā)現(xiàn)他打印的信息沒有我想要的報(bào)錯(cuò)信息，都是些js文件選項(xiàng)
但是，當(dāng)你打印err.response時(shí)就會(huì)有你想要的信息了
.catch(err => {
console.log(err);
console.log(err.response);
})
3.關(guān)于自定義模態(tài)框的布局
以前也有寫過自定義模態(tài)框，但是有點(diǎn)瑕疵，我沒去修改，最近看著elementUI的對話框，終于發(fā)現(xiàn)了導(dǎo)致那點(diǎn)瑕疵的原因了
在自定義模態(tài)框時(shí)，在最外層會(huì)有一層半透明的陰影層，我為了里面的內(nèi)容水平垂直居中，就在這半透明層使用了flex布局，但是，使用后，在瀏覽器中f12后，然后一直把頁面變小，你就發(fā)現(xiàn)，模態(tài)框的內(nèi)容被遮擋了，即使有滾動(dòng)條，也無法滑動(dòng)至完全看到模態(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時(shí)間戳
/* new Date()獲取的時(shí)間戳是以毫秒為單位，我這里后臺(tái)返回的是以秒為單位 */ let time = Math.floor(new Date() / 1000);5.利用elementUI中的el-cascader級聯(lián)選擇器來實(shí)現(xiàn)地址級聯(lián)選擇
el-cascader可以實(shí)現(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)動(dòng)數(shù)據(jù)（不帶“全部”選項(xiàng)）
regionData是省市區(qū)三級聯(lián)動(dòng)數(shù)據(jù)（不帶“全部”選項(xiàng)）
provinceAndCityDataPlus是省市區(qū)三級聯(lián)動(dòng)數(shù)據(jù)（帶“全部”選項(xiàng)）
regionDataPlus是省市區(qū)三級聯(lián)動(dòng)數(shù)據(jù)（帶“全部”選項(xiàng)）
"全部"選項(xiàng)綁定的value是空字符串""
CodeToText是個(gè)大對象，屬性是區(qū)域碼，屬性值是漢字 用法例如：CodeToText["110000"]輸出北京市
TextToCode是個(gè)大對象，屬性是漢字，屬性值是區(qū)域碼 用法例如：TextToCode["北京市"].code輸出110000,TextToCode"北京市".code輸出110100,TextToCode"北京市"["朝陽區(qū)"].code輸出110105
使用，我這里實(shí)現(xiàn)的是地址二級選擇
正在努力學(xué)習(xí)中，若對你的學(xué)習(xí)有幫助，留下你的印記唄（點(diǎn)個(gè)贊咯^_^）
往期推薦：
實(shí)現(xiàn)單行及多行文字超出后加省略號
判斷iOS和Android及PC端
使用vue開發(fā)移動(dòng)端管理后臺(tái)
畫三角形
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/106890.html
摘要：獲取字符串中出現(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...
摘要：獲取字符串中出現(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...
摘要：簡單點(diǎn)說呢，就是與后端的數(shù)據(jù)交互和怎么把數(shù)據(jù)展示出來，用到的資源主要是和，其它參考插件使用。當(dāng)時(shí)，加載中的提示就會(huì)出現(xiàn)。后端返回的數(shù)據(jù)如上圖，并不是所有的字段都是可以進(jìn)行搜索的字段。 1.前言 今天要做的，就是在上一篇文章的基礎(chǔ)上，進(jìn)行功能頁面的開發(fā)。簡單點(diǎn)說呢，就是與后端的數(shù)據(jù)交互和怎么把數(shù)據(jù)展示出來，用到的資源主要是element-ui和vue-resource，其它參考（vue-...
摘要：往往定義組件的構(gòu)造器后，不需要手動(dòng)的進(jìn)行初始化，而是在其他組件的模板中當(dāng)成標(biāo)簽來使用，這時(shí)候需要調(diào)用注冊成組件。這樣設(shè)計(jì)的目的是防止從子組件意外改變父級組件的狀態(tài)，從而導(dǎo)致應(yīng)用的數(shù)據(jù)流向難以理解。 上節(jié)說到組件https://segmentfault.com/a/1190000009236700，這一節(jié)繼續(xù)來學(xué)習(xí)組件： 原文博客地址，歡迎學(xué)習(xí)交流:點(diǎn)擊預(yù)覽從github上獲取本文代碼：...
閱讀 1688·2021-09-24 10:38
閱讀 1566·2021-09-22 15:15
閱讀 3129·2021-09-09 09:33
閱讀 954·2019-08-30 11:08
閱讀 697·2019-08-30 10:52
閱讀 1304·2019-08-30 10:52
閱讀 2400·2019-08-28 18:01
閱讀 584·2019-08-28 17:55
