如何實現elementui中的el-cascader級聯選擇器

這篇文章給大家分享的是有關如何實現elementui中的el-cascader級聯選擇器的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

一、效果

功能：使用接口調回來的數據，顯示出可選的項，并開始有默認的選項值。

二、主要代碼

<el-cascader ref="cascaderAddr" :options="rangeArr" :props="optionProps" v-model="plable"  @change="handleChange3" ></el-cascader>

解釋：

（1）數據源不符合官方的數據源，需要重新指向

但是我們接口返回的數據源是這樣的：

所以要重新指向一下value值、lable值以及children值（所以才有了:props=“optionProps”）；

（2）expandTrigger：次級菜單的展開方式click / hover，默認為click

（3）checkStrictly：是否嚴格的遵守父子節點不互相關聯

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('選中lable值',this.plable);
			var thsAreaCode = this.$refs.cascaderAddr.getCheckedNodes()[0].pathLabels;;   //注意2： 獲取label值
			console.log('lable',thsAreaCode)  // 注意3： 最終結果是個一維數組對象
			var len=value.length-1;
			this.form.ranges_sguid=value[len];//這是最終修改后的要提交的選中后的數據值
			console.log('guid',this.form.ranges_sguid);
			this.$refs.cascaderAddr.toggleDropDownVisible();// 選擇之后將下拉界面收起
		}
}

感謝各位的閱讀！關于“如何實現elementui中的el-cascader級聯選擇器”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！