当前位置: 首页 > article >正文

解决el-select回显问题:使其显示label值

框内显示value的值,没有显示label的值

遇到的问题

原始代码

        <el-form-item label="解锁模式">
          <el-select v-model="form.unlockMode" placeholder="请选择">
              <el-option label="" value="0"></el-option>
              <el-option label="" value="1"></el-option>
          </el-select>
        </el-form-item>

修改方法1、

将value="0"改为value=0 、value="1"改为value=1

        <el-form-item label="解锁模式">
          <el-select v-model="form.unlockMode" placeholder="请选择">
              <el-option label="" value=0></el-option>
              <el-option label="" value=1></el-option>
          </el-select>
        </el-form-item>

修改方法2、

将value="0"改为 :value=“0” 、value="1"改为 :value=“1”(:value是v-bind:value的简写形式)

        <el-form-item label="解锁模式">
          <el-select v-model="form.unlockMode" placeholder="请选择">
              <el-option label="" :value="0"></el-option>
              <el-option label="" :value="1"></el-option>
          </el-select>
        </el-form-item>

解决后

总结

v-model绑定的值与el-option中的value类型不一致造成的。el-select在做回显value判断的时候用的是===,值和类型都必须一致才行。

我这里v-model绑定的是int类型的,而value的值是string类型的,两者不匹配。

value

value 的值为"0"、 “1”
后端定义的int类型和前端的string类型不匹配。1 != “1”

<el-option label="" value="0"></el-option>
<el-option label="" value="1"></el-option>

:value

使用 :value 时,值会被当作表达式来处理。value 属性的值是数字 0 和 1。

<el-option label="" :value="0"></el-option>
<el-option label="" :value="1"></el-option>

http://www.kler.cn/a/508859.html

相关文章:

  • 《计算机网络》课后探研题书面报告_网际校验和算法
  • 重拾Python学习,先从把python删除开始。。。
  • Ability Kit-程序框架服务(类似Android Activity)
  • 算法面试准备 - 手撕系列第七期 - MLP(利用FashionMNIST数据集)
  • 从AI生成内容到虚拟现实:娱乐体验的新边界
  • 【机器学习实战入门】使用 Pandas 和 OpenCV 进行颜色检测
  • [操作系统] 进程的概念与基础操作详解
  • 5 分钟复刻你的声音,一键实现 GPT-Sovits 模型部署
  • SSH config
  • 麒麟v10 安装php5.6
  • 第83期 | GPTSecurity周报
  • Linux的常用命令(一)
  • 在Mac mini上实现本地话部署AI和知识库
  • C++实现设计模式--- 观察者模式 (Observer)
  • 从 JIRA 数据到可视化洞察:使用 Python 创建自定义图表
  • yolo训练数据集样本的标签形状一致是什么意思
  • ReactiveSwift 简单使用
  • ThreeJS能力演示——界面点选交互能力
  • 探索基于机器学习的信用评分:从数据到洞察
  • Android BottomNavigationView不加icon使text垂直居中,完美解决。
  • PyTorch使用教程(4)-torch.nn
  • PCL 计算多边形的面积【2025最新版】
  • Redisson分布式锁的原理和实践?
  • 0基础跟德姆(dom)一起学AI 自然语言处理16-输入部分实现
  • Kotlin Bytedeco OpenCV 图像图像55 图像透视变换
  • macOS docker hub / docker desktop替代方案