element UI 选择器 踩的坑 获取到了value 显示不出对应的 value

最新推荐文章于 2023-05-15 11:30:21 发布
最新推荐文章于 2023-05-15 11:30:21 发布
阅读量722 收藏
点赞数
分类专栏： bug 文章标签： vue vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49050598/article/details/113260933
版权

获取到了value 显示不出对应的 value在这里插入图片描述

样式图在这里插入图片描述
代码
在这里插入图片描述
获取到的数据
这里直接绑定了，但是默认转换出来的是数字 ，所以最后值没有显示出来
这里 v-model绑定的值改成字符串的0
绑定的value是字符串的 所以v-model也得是字符串的
转换一下就好了
在这里插入图片描述
就这样解决了

兔子R/T坦克
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Element UI框架中巧用树选择器的实现
10-17
在Element UI这个流行的Vue.js组件库中，虽然它提供了丰富的组件，如选择器（Select）和树形控件（Tree），但并未直接提供树形选择器。然而，开发者可以通过自定义插槽（slot）和监听事件来巧妙地实现这一功能。本文...
getFieldValue取得值为undefined
hhthwx的博客
01-19 1万+
代码如下： import { Form, Input, Button} from 'antd'; const FormItem = Form.Item; class PCHeader extends React.Component { handleSubmit(e){ e.preventDefault(); var formData = this.prop
vue 表单中getFieldDecorator、getFieldValue、setFieldValue用法
热门推荐
u014370269的专栏
04-16 1万+
Ant Design 表单中getFieldDecorator、getFieldValue、setFieldValue用法 Ant Design 表单中getFieldDecorator、getFieldValue、setFieldValue用法 一、getFieldDecorator# getFieldDecorator是一个方法，这个方法接收两个参数，第一个是表单的字段对象，第二个是验证...
elementui 下拉框回显_解决element ui select下拉框不回显数据问题的解决
weixin_33788424的博客
01-26 2588
最近在做一个项目,项目的后端是地址: https://github.com/wangyuanjun008/wyj-springboot-security.git前端地址是 https://github.com/wangyuanjun008/wyj-vue-security.git ,使用的前端语言是vue,使用webpack构建vue-cli全家桶在项目中用到 el-select 时遇到一个问题，...
表单自定义校验获取的value为undefined(element ui)
qq_45331969的博客
09-06 7373
表单自定义校验 先看一段官网代码(取了一小部分)： <el-form :model="ruleForm" :rules="rules"> <el-form-item label="年龄" prop="age"> <el-input v-model.number="ruleForm.age"></el-input> </el-form-item> </el-form> export default { data(
elementUI中的Switch开关使用事项
aaassdf11的博客
06-08 1297
elementUI中的Switch开关使用事项
element-ui 限制日期选择的方法(datepicker)
08-27
Element-UI 日期选择器提供了多种类型的日期选择器，如日期选择器、日期时间选择器、日期范围选择器等。在这里，我们将使用日期选择器来演示限制日期选择的方法。 在上面的示例代码中，我们使用了两个日期选择器，...
详解关于element级联选择器数据回显问题
10-17
在给定的代码段中，我们看到一个基于 Element UI 的级联选择器（Cascader）用于选择部门名称。级联选择器的属性配置包括 `placeholder`、`:props`、`:options`、`filterable`、`change-on-select` 和 `v-model`。...
详解element-ui日期时间选择器的日期格式化问题
10-17
在使用Vue.js和Element-UI构建后台管理系统时，日期时间选择器DateTimePicker是常用组件，用于用户方便地选取日期和时间。然而，在实际应用中，我们可能会遇到将前端选取的日期时间传递给后台时，由于格式不匹配导致...
element-ui 时间选择器限制范围的实现（随动）
01-19
1、用两个独立时间选择器控制，实现起来比较混乱。 2、用日期范围选择器。 第一种方式没有做demo，有特殊需求的小伙伴请留言。这里选择使用日期范围选择器，使用起来可以预见代码会清爽很多。 效果图： 代码： &...
为什么写了value属性 jq赋值value值不显示_那些五年以下Java经验不知道的事
weixin_39722025的博客
12-02 218
这篇其实计划了好久了，一直没动力写，今天回来的稍微早了一会，总结一下几个概念。1、标量替换首先要搞明白什么叫标量。所谓标量就是不可以进一步分解的量，如java中基本数据类型和reference类型，相对的一个数据可以继续分解，称为聚合量。因此 如果把一个对象拆散，将其成员变量恢复到基本类型来访问就叫做标量替换。标量替换的好处是避免了对象在堆上的分配，在栈上直接创建，提高了运行效率。2、逃逸分析逃逸...
使用Element ui的from表单验证时，绑定的值无法在验证函数中获取值,恒为undefined的问题分析。
陈先生的博客
12-13 2612
在最近使用element ui的form表单功能进行开发时，通过prop绑定时，无法正确的获取value值，一直输出为undefined，通过调查发现，目前el-form的model主要用表单验证的，也就是配合el-form的rules和el-form-item的prop来使用的。上面是个错误的示范，如果把要验证的数据放在了model绑定的对象外，那么就无法获得数据，验证规则内会一直得到undefined。当你已经对该属性进行绑定后，那么接下来，你的表单的prop默认绑定的值就是model绑定的对象的值。
el-table实现可编辑表格的思路；el-table删除不正确：表格中的el-select下拉数据项有值，但输入框中value值不显示
最新发布
qq_45327886的博客
05-15 3031
el-table实现可编辑表格的思路；el-table删除不正确：表格中的el-select下拉数据项有值，但输入框中value值不显示
element-ui的el-select如何不显示value，显示value对应的label值
qq_19509799的博客
05-31 8890
我们想到得到的是下面的效果： 现在遇到问题 效果是这样的： 调试发现 是value的格式存在问题，数据库读取到的数据不一定为number类型 需要自己转换一下 代码如下即可 但是 还有一种情况就是 : 此时在赋值时候 应该使用String ...
2021.10.27 element的表单使用自定义组件时，校验监测不到value改变
一只白猫罢了
10-27 1588
遇到个bug： 表单上传文件后，明明已经有内容了，字段提示校验还存在。 rule = [{ required: true, message: `请上传${item.title}`, trigger: 'change' }] 解决过程： 以为是校验方法有问题，自己写了个针对附件上传的校验： const validatePass = (rule, value, callback) => { if (value.length) { return callback(); } else
elementui级联选择器数据回显问题
webCandy的博客
08-22 3232
elementui 级联选择器数据回显问题
element-ui表单验证，value一直为undefined的一种可能解决方案
HermitSun的博客
04-18 1万+
有很多人遇到过这个问题，但是一般都是因为prop没写对，或者没有在data里声明；但我遇到的情况这两者都不是。代码如下： <template> <el-form :rules="rules"> <el-form-item prop="value"> <el-input v-model="form.value"/> &l...
vue有关elementui form表单rules验证问题，有值却仍然显示不通过
web15085181368的博客
03-02 1万+
帮同事解决一个vue表单验证的问题，利用了rules，但是填完内容还是一直提示不能为空的错误，情况如下图所示： 1、检查:rules ref，例如本黎:rules=“rules” ref="reluForm"是否与data中定义的一致 2、检查prop值与绑定的属性一致，例如本例中prop="title"中title与data中rules规则绑定的属性一一对应 3、检测表单是否一致，例如本例中:model="addForm"与data中定义的表单名是否一致 以上都检查过没有问题 <el-form :
element-ui Select 选择器 默认赋value值时不匹配label中对应值
qq_44178552的博客
11-23 1812
未修改前效果 代码如下 可以看出该下拉框中显示的数据为 value 值而非 label 值 通过查阅资料发现我的value格式和传入的v-model值得类型不统一 可以看出控制台打印的 deptno 的值为 int 而我们传入的事String //原代码 for (let i = 0;i < res.data.data.data.length; i++){ this.deptnames.push({ "deptname":res.data.data.data[i].d
Element UI：级联选择器(Cascader)详细使用教程
Element Cascader 级联选择器是Element UI框架中的一个关键组件，主要用于实现具有层次结构的数据选择。以下是对这个组件的详细说明： 1. **基础用法**： - `v-model`：用于双向绑定选中的值，这里的`value`变量会...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值