亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時間:2021年10月22日 11:55:14   作者:huang_jimei  
本文主要介紹了elementui中的el-cascader級聯(lián)選擇器的實踐,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下

一、效果

在這里插入圖片描述

功能:使用接口調(diào)回來的數(shù)據(jù),顯示出可選的項,并開始有默認(rèn)的選項值。

二、主要代碼

<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,默認(rèn)為click

(3)checkStrictly:是否嚴(yán)格的遵守父子節(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;//默認(rèn)選中的值
			}
		})
		 .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)文章

  • vue搜索和vue模糊搜索代碼實例

    vue搜索和vue模糊搜索代碼實例

    這篇文章主要介紹了vue搜索和vue模糊搜索,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05
  • Vue中mixins混入的介紹與使用詳解

    Vue中mixins混入的介紹與使用詳解

    如果我們在每個組件中去重復(fù)定義這些屬性和方法會使得項目出現(xiàn)代碼冗余并提高了維護(hù)難度,針對這種情況官方提供了Mixins特性,這時使用Vue mixins混入有很大好處,下面就介紹下Vue mixins混入使用方法,需要的朋友參考下吧
    2022-12-12
  • vue.js滾動條插件vue-scroll的基本用法

    vue.js滾動條插件vue-scroll的基本用法

    在移動端或PC,頁面的部分內(nèi)容常常需要我們讓其在頁面滾動,這篇文章主要給大家介紹了關(guān)于vue.js滾動條插件vue-scroll的基本用法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-12-12
  • 2023年最新的vue.js下載和安裝的3種方法詳解

    2023年最新的vue.js下載和安裝的3種方法詳解

    這篇文章主要介紹了2023年最新的vue.js下載和安裝的3種方法,每種方法結(jié)合實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2023-05-05
  • vue3.0運行npm run dev報錯Cannot find module node:url

    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
  • Vue 實現(xiàn)前端權(quán)限控制的示例代碼

    Vue 實現(xiàn)前端權(quán)限控制的示例代碼

    這篇文章主要介紹了Vue 實現(xiàn)前端權(quán)限控制的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-07-07
  • 詳解vue渲染函數(shù)render的使用

    詳解vue渲染函數(shù)render的使用

    本篇文章主要介紹了vue渲染函數(shù)render的使用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-12
  • antd vue表格可編輯單元格以及求和實現(xiàn)方式

    antd vue表格可編輯單元格以及求和實現(xiàn)方式

    這篇文章主要介紹了antd vue表格可編輯單元格以及求和實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • vue實現(xiàn)頁面緩存功能

    vue實現(xiàn)頁面緩存功能

    這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)頁面緩存功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-10-10
  • vue用elementui寫form表單時,在label里添加空格操作

    vue用elementui寫form表單時,在label里添加空格操作

    這篇文章主要介紹了vue用elementui寫form表單時,在label里添加空格操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08

最新評論