elementui级联选择器数据回显问题
elementui 级联选择器数据回显问题
·
问题描述
项目中添加编辑功能遇见三级联动的时候,三级联动数据回显不显示
<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++
更多推荐
所有评论(0)