首先附上官网例子:http://element-cn.eleme.io/#/zh-CN/component/select#select-xuan-ze-qi
<template>
<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>
</template>
<script>
export default {
data() {
return {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
},
value: '选项2'
}
}
}
</script>
label是显示在下拉列表中的,如图所示
value则是我们通常传送给后端的,但是传的字段值一般不会是中文,设置为字母也没事,如果需要传数字呢
可能会出现框内显示数字的情况:
解决:绑定value值的时候在前面加上冒号,
不加冒号:字符串,bodyCheck.PicSize的值必须是字符串才能正常显示下拉框的默认值,并且选择后框内显示数字;
加冒号:会根据字段值来判断属性的类型
下面代码就是正常的了
<el-select v-model.number="bodyCheck.PicSize">
<el-option label="30*30" :value="0"/>
<el-option label="60*60" :value="1"/>
<el-option label="100*100" :value="2"/>
</el-select>