elementui 級聯選擇器 動態加載

<template>
  <!-- 商品分類 -->
  <div class='ProductClassify'>
    {{areaCode}}
    <el-cascader v-bind="$attrs"
                 clearable
                 placeholder="請選擇"
                 v-model="areaCode"
                 :props="cascaderProps"></el-cascader>
  </div>
</template>

<script>
export default {
	name: 'ProductClassify',
	components: {},
	filters: {},
	props: {},
	data() {
		return {
			areaCode: '',
			cascaderProps: {
				// label: "goodsName",//當返回的數據字段不是label和value可以改成實際的字段比如goodsName
				// value: "goodsCode",
				// children: "options2"
				lazy: true,
				lazyLoad: this.lazyLoad,
			},
		};
	},
	computed: {},
	watch: {},
	created() {},
	mounted() {},
	methods: {
		lazyLoad(node, resolve) {
			this.getData(node, resolve);
		},
		async getData(node, resolve) {
			let that = this;
			let level = node.level;
			if (!node.data) {
				await this.getClassData().then((data) => {
					//接口
					const nodes = Array.from(data).map((item) => ({
						value: item.Code,
						label: `${item.Name}`,
						leaf: level >= 1,
					}));
					// 通過調用resolve將子節點數據返回，通知組件數據加載完成
					resolve(nodes);
				});
			} else {
				await this.getClassData(node.data.value).then((data) => {
					const nodes = Array.from(data).map((item) => ({
						value: item.Code,
						label: `${item.Name}`,
						leaf: level >= 2,
					}));
					// 通過調用resolve將子節點數據返回，通知組件數據加載完成
					resolve(nodes);
				});
			}
		},
		getClassData(PCode = '') {
			return new Promise((resolve) => {
				fetchData({
					API: '/api/Goods/UserGetCategoryByPCode',
					hideLoading: true,
					para: {
						PCode: PCode || '',
					},
					callback: (data) => {
						/* 
            Code: "001"
Name: "電視影音"
PCode: "0"
            */
						resolve(data);
					},
				});
			});
		},
	},
};
</script>
<style lang='scss' scoped>
</style>