关于element ui Select 下拉框 选择器回显的问题
el-select下拉框
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
在vue中声明下拉框绑定的数据
export default {
data() {
return {
options: [{
value: 1,
label: '黄金糕'
}, {
value: 2,
label: '双皮奶'
}, {
value: 3,
label: '蚵仔煎'
}, {
value: 4,
label: '龙须面'
}, {
value: 5,
label: '北京烤鸭'
}],
value: ''
}
}
}
如果需要做element ui 的select回显,可以直接给data中定义的类型直接赋值,但在有时候会莫名其妙的失效,我在此提出这个问题的根本原因。
此时,在data中定义select下拉框的value值为number类型,如果需要回显的变量中的value中,不是当前data中options中对象.value的类型,会回显失败。
简单来说,需要回显的数据 —— options中的vaule的类型一定要 === 定义在data中的options中的vaule的类型。
如:
export default {
data() {
return {
options: [{
// 为namber类型
value: 1,
label: '黄金糕'
}],
value: ''
}
}
}
// 模拟请求回来的数据
options[
{
// 万万不可,会回显失败
value: "1",
label: '黄金糕'
}
]
到此为止,如有不正确的地方,请各位大佬提出意见。。