日常开发记录- ElementUI select选择器编辑时反显的是 value 值,而没有显示出对应的 lable 值
原因可能是因为,后台返回的 value 字符串类型,但是前端自己写的下拉选择 option 对应的 value 是整数类型,就会导致对应不起来,渲染不出效果。
<template>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in cities"
:key="item.value"
:label="item.label"
:value="item.value">
<span style="float: left">{{ item.label }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
</el-option>
</el-select>
</template>
<script>
export default {
data () {
return {
cities: [{
value: '0',
label: '关'
}, {
value: '1',
label: '开'
}],
// 这里注意 value是字符串类型不是整数类型 value: 1不对
value: '1'
}
}
}
</script>
错误效果展示:
正确效果展示:
fighting