ElementUI中的el-select显示的不是对应label值

这个下拉框组件可以在v-model绑定的值等于option中value的值时,显示对应option的label

但是下面这个出了问题,显示的是1或2或3,而不是对应的label

html 复制代码
<el-select v-model="editParam.role_id" placeholder="请选择角色身份">
  <el-option label="普通用户" value="1"></el-option>
  <el-option label="前台" value="2"></el-option>
  <el-option label="管理员" value="3"></el-option>
</el-select>

经过一顿查找,发现是editParam.role_id值的类型和value的类型不一样

把它们都变成数字类型,使用v-bind绑定value属性即可进行转换

html 复制代码
<el-select v-model="editParam.role_id" placeholder="请选择角色身份">
  <el-option label="普通用户" :value="1"></el-option>
  <el-option label="前台" :value="2"></el-option>
  <el-option label="管理员" :value="3"></el-option>
</el-select>
相关推荐
安冬的码畜日常4 分钟前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程
烛阴6 分钟前
Node.js中必备的中间件大全:提升性能、安全与开发效率的秘密武器
javascript·后端·express
小杨升级打怪中8 分钟前
前端面经-JS篇(三)--事件、性能优化、防抖与节流
前端·javascript·xss
清风细雨_林木木12 分钟前
Vue开发网站会有“#”原因是前端路由使用了 Hash 模式
前端·vue.js·哈希算法
鸿蒙布道师35 分钟前
OpenAI为何觊觎Chrome?AI时代浏览器争夺战背后的深层逻辑
前端·人工智能·chrome·深度学习·opencv·自然语言处理·chatgpt
袈裟和尚40 分钟前
如何在安卓平板上下载安装Google Chrome【轻松安装】
前端·chrome·电脑
曹牧44 分钟前
HTML字符实体和转义字符串
前端·html
小希爸爸1 小时前
2、中医基础入门和养生
前端·后端
局外人LZ1 小时前
前端项目搭建集锦:vite、vue、react、antd、vant、ts、sass、eslint、prettier、浏览器扩展,开箱即用,附带项目搭建教程
前端·vue.js·react.js
G_GreenHand1 小时前
Dhtmlx Gantt教程
前端