随笔 - 142  文章 - 14  评论 - 0  阅读 - 70149

日常开发记录- 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   法老的微笑  阅读(1420)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示