Practice of el-cascader cascade selector in elementui

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

export default {
	data() {
// Delivery location selection source rangeArr: [],
			optionProps: {
				value: 'sguid',
				label: 'address',
				children: 'childs',
				checkStrictly: true,
				expandTrigger: 'hover'
			},
			plable: [], //delivery selection value},
mounted: function() {
//Delivery location this.$axios
			.get('url')
			.then(response => {
				this.rangeArr = response.data.obj;
				console.log('Delivery can choose source aaaa', this.rangeArr);			
			})
			.catch(function(error) {
				// Request failure processing console.log(error);
			});
	//Get the initial value this.$axios.get("url")
	    .then((response) => {
			if (response.data.status == 200){
			    this.plable=response.data.obj.ranges_sguid;//Default selected value }
		})
		 .catch(function (error) { // Request failure processing console.log(error);
	    });
},
methods: {
handleChange3(value) {
			console.log('select id value',value);
			console.log('Select label value',this.plable);
			var thsAreaCode = this.$refs.cascaderAddr.getCheckedNodes()[0].pathLabels;; //Note 2: Get label value console.log('lable',thsAreaCode) // Note 3: The final result is a one-dimensional array object var len=value.length-1;
			this.form.ranges_sguid=value[len];//This is the final modified selected data value to be submitted console.log('guid',this.form.ranges_sguid);
			this.$refs.cascaderAddr.toggleDropDownVisible(); // After selecting, collapse the drop-down interface }
}