问题描述

项目中添加编辑功能遇见三级联动的时候，三级联动数据回显不显示

<el-form-item label="所选服务：" prop="nvcBigName">
    <el-cascader v-model="serverDefaultValue" :options="options" @change="serverChange" class="u-width-300"></el-cascader>
</el-form-item>

data(){
	return{
		serverDefaultValue: [],
		// 所选服务
			options: [
				{
					value: '数据服务',
					label: '数据服务',
					children: [
						{
							value: '会员服务',
							label: '会员服务',
							children: [
								{
									value: '白银会员',
									label: '白银会员'
								},
								{
									value: '黄金会员',
									label: '黄金会员'
								},
								{
									value: 'VIP会员',
									label: 'VIP会员'
								},
								{
									value: '试用会员',
									label: '试用会员'
								}
							]
						}
					]
				}
			],
	}
}

// 所选服务
serverChange(val) {
	console.log(val)
	this.ruleForm.nvcBigName = val[0]
	this.ruleForm.nvcMiddleName = val[1]
	this.ruleForm.nvcServiceName = val[2]
},
//数据回显
this.serverDefaultValue.push(res.data.nvcBigName)
this.serverDefaultValue.push(res.data.nvcMiddleName)
this.serverDefaultValue.push(res.data.nvcServiceName)

//看着没问题，但是不会回显

解决方案：

添加key值,回显的时候改变key值就可以了

<el-form-item label="所选服务：" prop="nvcBigName">
    <el-cascader v-model="serverDefaultValue" :key="serverKey" :options="options" @change="serverChange" class="u-width-300"></el-cascader>
</el-form-item>

data(){
	return{
		serverKey:0
	}
}

//数据回显
this.serverDefaultValue.push(res.data.nvcBigName)
this.serverDefaultValue.push(res.data.nvcMiddleName)
this.serverDefaultValue.push(res.data.nvcServiceName)
this.serverKey++