elementui中的el-cascader級(jí)聯(lián)選擇器的實(shí)踐
更新時(shí)間：2021年10月22日 11:55:14 作者：huang_jimei
本文主要介紹了elementui中的el-cascader級(jí)聯(lián)選擇器的實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
一、效果
功能：使用接口調(diào)回來(lái)的數(shù)據(jù)，顯示出可選的項(xiàng)，并開始有默認(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í)菜單的展開方式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搜索和vue模糊搜索，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
如果我們?cè)诿總€(gè)組件中去重復(fù)定義這些屬性和方法會(huì)使得項(xiàng)目出現(xiàn)代碼冗余并提高了維護(hù)難度，針對(duì)這種情況官方提供了Mixins特性，這時(shí)使用Vue mixins混入有很大好處，下面就介紹下Vue mixins混入使用方法，需要的朋友參考下吧2022-12-12
vue.js滾動(dòng)條插件vue-scroll的基本用法
在移動(dòng)端或PC,頁(yè)面的部分內(nèi)容常常需要我們讓其在頁(yè)面滾動(dòng),這篇文章主要給大家介紹了關(guān)于vue.js滾動(dòng)條插件vue-scroll的基本用法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
這篇文章主要介紹了2023年最新的vue.js下載和安裝的3種方法,每種方法結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-05-05
vue3.0運(yùn)行npm run dev報(bào)錯(cuò)Cannot find module&
本文主要介紹了vue3.0運(yùn)行npm run dev報(bào)錯(cuò)Cannot find module node:url,因?yàn)槭褂玫膎ode版本是14.15.1低于15.0.0導(dǎo)致,具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10
Vue 實(shí)現(xiàn)前端權(quán)限控制的示例代碼
這篇文章主要介紹了Vue 實(shí)現(xiàn)前端權(quán)限控制的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
本篇文章主要介紹了vue渲染函數(shù)render的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
antd vue表格可編輯單元格以及求和實(shí)現(xiàn)方式
這篇文章主要介紹了antd vue表格可編輯單元格以及求和實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)頁(yè)面緩存功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
vue用elementui寫form表單時(shí),在label里添加空格操作
這篇文章主要介紹了vue用elementui寫form表單時(shí),在label里添加空格操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08