elementui中的el-cascader級聯(lián)選擇器的實踐
一、效果

功能:使用接口調(diào)回來的數(shù)據(jù),顯示出可選的項,并開始有默認的選項值。
二、主要代碼
<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:次級菜單的展開方式click / hover,默認為click
(3)checkStrictly:是否嚴格的遵守父子節(jié)點不互相關(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) {
// 請求失敗處理
console.log(error);
});
//獲取初始值
this.$axios.get("url")
.then((response) => {
if (response.data.status == 200){
this.plable=response.data.obj.ranges_sguid;//默認選中的值
}
})
.catch(function (error) { // 請求失敗處理
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é)果是個一維數(shù)組對象
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級聯(lián)選擇器的實踐的文章就介紹到這了,更多相關(guān)element el-cascader級聯(lián)選擇器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue3.0運行npm run dev報錯Cannot find module&
本文主要介紹了vue3.0運行npm run dev報錯Cannot find module node:url,因為使用的node版本是14.15.1低于15.0.0導(dǎo)致,具有一定的參考價值,感興趣的可以了解一下2023-10-10
antd vue表格可編輯單元格以及求和實現(xiàn)方式
這篇文章主要介紹了antd vue表格可編輯單元格以及求和實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-04-04
vue用elementui寫form表單時,在label里添加空格操作
這篇文章主要介紹了vue用elementui寫form表單時,在label里添加空格操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08

