异步加载

attribute 数据

[]

sku 数据

[]

<template>
	<div>
		<SkuForm
			ref="skuForm"
			:source-attribute="sourceAttribute"
			:structure="structure"
			:attribute.sync="attribute"
			:sku.sync="sku"
			async
		/>
		<el-button type="primary" :loading="loading" style="margin-top: 10px;" @click="load(1)">模拟加载数据1</el-button>
		<el-button type="primary" :loading="loading" style="margin-top: 10px;" @click="load(2)">模拟加载数据2</el-button>
		<el-button type="primary" :loading="loading" style="margin-top: 10px;" @click="load(3)">模拟加载数据3</el-button>
		<el-row type="flex" :gutter="20">
			<el-col>
				<el-divider content-position="left">attribute 数据</el-divider>
				<pre><code>{{ attribute }}</code></pre>
			</el-col>
			<el-col>
				<el-divider content-position="left">sku 数据</el-divider>
				<pre><code>{{ sku }}</code></pre>
			</el-col>
		</el-row>
	</div>
</template>

<script>
export default {
	data() {
		return {
			loading: false,
			sourceAttribute: [],
			structure: [
				{
					name: 'originalprice',
					type: 'input',
					label: '成本价'
				},
				{
					name: 'price',
					type: 'input',
					label: '销售价'
				},
				{
					name: 'stock',
					type: 'input',
					label: '库存'
				}
			],
			attribute: [],
			sku: []
		}
	},
	mounted() {},
	methods: {
		load(type) {
			this.loading = true
			if (type == 1) {
				setTimeout(() => {
					this.sourceAttribute = [
						{
							name: '颜色',
							item: ['黑', '金', '白']
						},
						{
							name: '内存',
							item: ['16G', '32G']
						}
					]
					setTimeout(() => {
						this.attribute = [
							{
								name: '颜色',
								item: ['黑', '金']
							},
							{
								name: '内存',
								item: ['64G']
							}
						]
						setTimeout(() => {
							this.sku = [
								{
									sku: '黑;64G',
									originalprice: '100',
									price: '80',
									stock: '100'
								},
								{
									sku: '金;64G',
									originalprice: '100',
									price: '85',
									stock: '50'
								}
							]
							// 切记，必须在 attribute、sku 数据都加载后再执行 init() 方法
							this.$refs.skuForm.init()
							this.loading = false
						}, 300)
					}, 300)
				}, 300)
			} else if (type == 2) {
				setTimeout(() => {
					this.sourceAttribute = [
						{
							name: '内存',
							item: ['16G', '32G']
						},
						{
							name: '颜色',
							item: ['黑', '金', '白']
						}
					]
					setTimeout(() => {
						this.attribute = [
							{
								name: '内存',
								item: ['64G']
							},
							{
								name: '颜色',
								item: ['红', '白']
							}
						]
						setTimeout(() => {
							this.sku = [
								{
									sku: '64G;红',
									originalprice: 10,
									price: 8,
									stock: 10
								},
								{
									sku: '64G;白',
									originalprice: 10,
									price: 8,
									stock: 5
								}
							]
							// 切记，必须在 attribute、sku 数据都加载后再执行 init() 方法
							this.$refs.skuForm.init()
							this.loading = false
						}, 300)
					}, 300)
				}, 300)
			} else {
				setTimeout(() => {
					this.sourceAttribute = [
						{
							name: '颜色',
							item: ['黑', '金', '白']
						}
					]
					this.attribute = []
					this.sku = []
					this.$refs.skuForm.init()
					this.loading = false
				}, 300)
			}
		}
	}
}
</script>

显示代码 复制代码 复制代码