日常开发记录- 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>

错误效果展示:

正确效果展示:

 

posted on 2022-07-11 15:52  法老的微笑  阅读(1291)  评论(0编辑  收藏  举报