elementui での el-cascader カスケードセレクタの実践

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

エクスポートデフォルト{
	データ（） {
// 配送場所選択ソース範囲Arr: [],
			オプションプロパティ: {
				値: 'sguid',
				ラベル: 'アドレス',
				子供: 「子供」,
				厳密にチェック: true、
				展開トリガー: 'hover'
			},
			plable: [], //配信選択値},
マウント: 関数() {
//配達場所 this.$axios
			.get('url')
			.then(応答 => {
				レスポンスデータを返します。
				console.log('配信はソース aaaa を選択できます', this.rangeArr);			
			})
			.catch(関数(エラー) {
				// リクエスト失敗処理 console.log(error);
			});
	//初期値を取得します this.$axios.get("url")
	    .then((応答) => {
			（レスポンスデータステータス == 200）{
			    this.plable=response.data.obj.ranges_sguid;//デフォルトで選択された値 }
		})
		 .catch(function (error) { // リクエスト失敗処理 console.log(error);
	    });
},
メソッド: {
ハンドル変更3(値) {
			console.log('ID値を選択',値);
			console.log('ラベル値を選択してください',this.plable);
			var thsAreaCode = this.$refs.cascaderAddr.getCheckedNodes()[0].pathLabels;; //注 2: ラベル値を取得します console.log('lable',thsAreaCode) //注 3: 最終結果は 1 次元配列オブジェクトです var len=value.length-1;
			this.form.ranges_sguid=value[len];//これは送信される最終的な変更された選択されたデータ値です console.log('guid',this.form.ranges_sguid);
			this.$refs.cascaderAddr.toggleDropDownVisible(); // 選択後、ドロップダウン インターフェースを折りたたみます }
}