elementui中的el-cascader級(jí)聯(lián)選擇器的實(shí)踐
一、效果
功能：使用接口調(diào)回來(lái)的數(shù)據(jù)，顯示出可選的項(xiàng)，并開(kāi)始有默認(rèn)的選項(xiàng)值。
二、主要代碼
<el-cascader ref="cascaderAddr" :options="rangeArr" :props="optionProps" v-model="plable" @change="handleChange3" style="width: 100%;"></el-cascader>
解釋：
（1）數(shù)據(jù)源不符合官方的數(shù)據(jù)源，需要重新指向
但是我們接口返回的數(shù)據(jù)源是這樣的：
所以要重新指向一下value值、lable值以及children值（所以才有了:props=“optionProps”）；
（2）expandTrigger：次級(jí)菜單的展開(kāi)方式click / hover，默認(rèn)為click
（3）checkStrictly：是否嚴(yán)格的遵守父子節(jié)點(diǎn)不互相關(guān)聯(lián)
export default {
data() {
//配送位置選擇源
rangeArr: [],
optionProps: {
value: 'sguid',
label: 'address',
children: 'childs',
checkStrictly: true,
expandTrigger: 'hover'
},
plable: [], //配送選擇值
},
mounted: function() {
//配送位置
this.$axios
.get('url')
.then(response => {
this.rangeArr = response.data.obj;
console.log('配送可選擇源aaaa', this.rangeArr);
})
.catch(function(error) {
// 請(qǐng)求失敗處理
console.log(error);
});
//獲取初始值
this.$axios.get("url")
.then((response) => {
if (response.data.status == 200){
this.plable=response.data.obj.ranges_sguid;//默認(rèn)選中的值
}
})
.catch(function (error) { // 請(qǐng)求失敗處理
console.log(error);
});
},
methods: {
handleChange3(value) {
console.log('選中id值',value);
console.log('選中l(wèi)able值',this.plable);
var thsAreaCode = this.$refs.cascaderAddr.getCheckedNodes()[0].pathLabels;; //注意2： 獲取label值
console.log('lable',thsAreaCode) // 注意3： 最終結(jié)果是個(gè)一維數(shù)組對(duì)象
var len=value.length-1;
this.form.ranges_sguid=value[len];//這是最終修改后的要提交的選中后的數(shù)據(jù)值
console.log('guid',this.form.ranges_sguid);
this.$refs.cascaderAddr.toggleDropDownVisible();// 選擇之后將下拉界面收起
}
}
到此這篇關(guān)于elementui中的el-cascader級(jí)聯(lián)選擇器的實(shí)踐的文章就介紹到這了,更多相關(guān)element el-cascader級(jí)聯(lián)選擇器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了VUE中如何動(dòng)態(tài)綁定類名和樣式問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了Vue3中使用pinia,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
vue中使用input[type="file"]實(shí)現(xiàn)文件上傳功能
這篇文章主要介紹了vue中使用input[type="file"]實(shí)現(xiàn)文件上傳功能，實(shí)現(xiàn)代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
這篇文章主要介紹了vue封裝swiper代碼實(shí)例解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
Vue render函數(shù)實(shí)戰(zhàn)之實(shí)現(xiàn)tabs選項(xiàng)卡組件
這篇文章主要介紹了Vue render函數(shù)實(shí)戰(zhàn)之實(shí)現(xiàn)tabs選項(xiàng)卡組件的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
elementUI select組件默認(rèn)選中效果實(shí)現(xiàn)的方法
這篇文章主要介紹了elementUI select組件默認(rèn)選中效果實(shí)現(xiàn)的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
用electron打包vue項(xiàng)目中的報(bào)錯(cuò)問(wèn)題及解決
這篇文章主要介紹了用electron打包vue項(xiàng)目中的報(bào)錯(cuò)問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue結(jié)合echarts繪制一個(gè)支持切換的折線圖實(shí)例
這篇文章主要介紹了vue結(jié)合echarts繪制一個(gè)支持切換的折線圖實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
如何使用Vue3的onMounted鉤子函數(shù)及vue3中onMounted的用法詳解
本文詳細(xì)介紹了Vue3中的`onMounted`鉤子函數(shù)的前世今生,包括其在Vue2中的前身`mounted`鉤子,以及Vue3中使用Composition?API的`onMounted`鉤子的用法,文章涵蓋了`onMounted`的多種用法,感興趣的朋友跟隨小編一起看看吧2024-11-11
這篇文章主要介紹了Vue使用zTree插件封裝樹(shù)組件操作,結(jié)合實(shí)例形式分析了vue.js整合zTree插件實(shí)現(xiàn)樹(shù)組件與使用相關(guān)操作技巧,需要的朋友可以參考下2019-04-04