有时根据需要,我们根据v-model的值绑定option

想要的效果:

实际的效果:

原因:

value的格式存在问题,数据库读取到的数据不一定为number类型,需要手动转换。

第一种

<template>
<div>
<el-card class="el-card">
<el-form :model="form" label-width="100px" label-position="right">
<el-form-item label="select测试">
<el-select v-model="form.select">
<el-option v-for="(item, index) in options"
:key="index"
:value="item.value"
:label="item.label"></el-option>
</el-select>
</el-form-item>
<el-form-item label="value显示"><el-input v-model="form.select"></el-input></el-form-item>
<el-button type="primary" @click="demo">select取value1选项</el-button>
</el-form>
</el-card>
</div>
</template> <script>
export default {
name: 'form',
data() {
return {
readValue: '', // 假设为我们读取到select的value值
form: {
select: ''
},
options: [
{
value: 1,
label: '测试1'
},
{
value: 2,
label: '测试2'
}
]
}
},
methods: {
demo() {
this.readValue = '1' // 此处可以替换成接口读取的内容 在内容未知情况下用Number转换即可
this.form.select = Number(this.readValue) // 通过Number将类型转换
}
}
}
</script>

第二种

<el-select v-model="emp.gender">
<el-option label="男" value="0" ></el-option>
<el-option label="女" value="1"></el-option>
</el-select>

在赋值的时候手动转换成String

//为模型数据设置值,基于VUE双向绑定回显到页面
this.emp=res.data.data;
//设置性别转换为String
this.emp.gender=String(this.emp.gender);

参考:https://blog.csdn.net/weixin_42413689/article/details/111617895?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-0&spm=1001.2101.3001.4242

element-ui 的el-select如何不显示value,显示value对应的label值的更多相关文章

  1. element UI中的select选择器的change方法需要传递多个值

    如果直接调用change事件,不传任何参数,则可以获取到当前选中的值(因为默认会将event参数传递过去) 场景: 你需要将select选择器 ”选中的当前元素“ 和 ”其他你需要的值“ 一起传递过去 ...

  2. Element UI系列:Select下拉框实现默认选择

    实现的主要关键点在于 v-mode 所绑定的值,必须是 options 数组中对应的 value 值

  3. 解决模糊查询问题 element UI 从服务器搜索数据,输入关键字进行查找

    做项目是遇见下拉框的形式,后台返回来3万多条,用element UI中的select选择器中的搜索还是会造成页面卡顿和系统崩溃,因此用了它的远程搜索功能,发现还不错,解决了这个问题. 代码1 < ...

  4. vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、mockjs用法、路由懒加载三种方式

    不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p> ...

  5. vue+element ui中select组件选择失效问题原因与解决方法

    codejing 2020-07-10 09:13:31  652  收藏 分类专栏: Web Vue Element UI 版权 .当表单form赋完值后,如果后续又对form中某一属性值进行操作如 ...

  6. Element UI——本地引入iconfont不显示

    前言 前面因为本地引入Element UI导致了iconfont不显示,所以只好再去Element UI官网去扒下iconfot 步骤 进入官网 组件 | Element UI F12进入控制台,找到 ...

  7. element UI 饿了么 UI 分页 按钮不显示的问题

    https://blog.csdn.net/sinat_37255207/article/details/88914235 一个很坑的 深坑  element UI 的 按钮 不显示的深坑 <e ...

  8. Element UI Form 每行显示多列,即多个 el-form-item

    Element UI Form组件使用问题. 每个 el-form-item 都会独占一行. 对于输入项很多的管理app, 能否在每个form中, 每行显示 2 个或者多个 el-form-item ...

  9. webpack打包绝对路径引用资源和element ui字体图标不显示的解决办法

    webpack打包绝对路径引用资源解决办法: 打开webpack.prod.conf.js 找到output:增加 publicPath: './',  即可,如图  element ui字体图标不显 ...

  10. element ui step组件在另一侧加时间轴显示

    这是我开发的时候遇到的一个问题:项目需要在步骤条(竖直方向)的另一侧加时间显示,但是我在element ui 的step组件中一直没找着设置方法,所以就自己想了个办法加进来,效果如下: 代码如下,先上 ...

随机推荐

  1. Go语言操作数据库及其常规操作

    Go操作MySQL 安装: go get -u github.com/go-sql-driver/mysql GO语言的操作数据库的驱动原生支持连接池, 并且是并发安全的 标准库没有具体的实现 只是列 ...

  2. adb下载安装

    下载地址:https://www.androiddevtools.cn/# 首页tab工具栏: 选择Android SDK工具-- SDK Tools 下载任一版本即可 安装 :将下载的安装包解压到D ...

  3. HUAWEI AppGallery Connect获得SOC国际权威认证,多举措保护信息和隐私安全

    近日,华为应用市场AppGallery Connect(简称AGC)一次性成功通过国际权威标准组织"美国注册会计师协会(AICPA)"认定的SOC1 Type2.SOC2 Type ...

  4. Java 高精度浮点数计算工具

    说起编程中的高精度数值,我第一反应就是double类型了.的确,double阶码11位,尾数52位,几乎能应对任何苛刻的要求......然而,当我天真地尝试用double来算泰勒展开式的函数值,离散代 ...

  5. 华中科大MOOC 操作系统原理讨论题

    1没有安装操作系统的计算机启动过程和结果? 启动会比较快,但功能很局限,无法使用常见的软件应用,对于普通用户来说,功能很局限,对于专业工程师来说,想使用没有操作系统的计算机也有难度.启动后进入 BIO ...

  6. 1068 Find More Coins

    Eva loves to collect coins from all over the universe, including some other planets like Mars. One d ...

  7. Typora+PicGo+cos图床打造开发者文档神器

    一.Typora简介 markdown简单.高效的语法,被每一个开发者所喜爱.Typora又是一款简约.强悍的实时渲染markdown编辑器.本文将介绍Typora搭配PicGo与腾讯cos对象存储( ...

  8. Linux下Apache服务的部署和配置

    目录 Apache服务的安装 yum源安装: 目录文件 源码包安装: 目录文件: Apache中添加对php的支持 Apache中添加php对mysql数据库的支持 Apache服务的高级配置 1:配 ...

  9. Swift系列二 - 循环控制

    一.if-else if后面的条件可以省略小括号 条件后面的大括号不可以省略 let age = 10 if age >= 18 { print("大学") } else i ...

  10. java之try catch finally

    try{ }catch(Exception e){ }finally{ } java异常处理在编程中很常见,将可能抛出异常的语句放在try{}中,若有异常抛出,则try{}中抛出异常语句之后的语句不再 ...