elementUI select组件value注意事项(value失效问题)

最新推荐文章于 2023-09-19 15:30:16 发布
最新推荐文章于 2023-09-19 15:30:16 发布
阅读量1k 收藏 3
点赞数
分类专栏： ====前端==== # vue日常 文章标签： elementui 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Selina_lxh/article/details/127802196
版权

第一:提出问题的前提场景:

form表单初始数据state是 数值
在这里插入图片描述
情景1:
select组件v-model = state 如果value是 :value的情况下
在这里插入图片描述
组件正常显示:
在这里插入图片描述
情景2:
value 不是:value
在这里插入图片描述
组件显示为:
在这里插入图片描述

form表单初始数据state是 字符串
在这里插入图片描述
情景1 :
value 是value=’ ’
在这里插入图片描述
组件正常显示:
在这里插入图片描述

情景2:
value 是 :value时
在这里插入图片描述
组件显示为:

在这里插入图片描述

猜测原因:

:value=‘1’时 value获取的不是字符串’1’,而是js表达式,此时也就是 1
value=‘1’时 value获取的就是字符串’1’

结论:
data中的state 是 数值 时, value也需要是数值, 所以此时需要格式为 :value=‘1’,
同理,state为字符串时, value也需要是字符串,所以此时需要格式为 value=‘1’

苍山洱海胖
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
elementUI select组件value值注意事项详解（value失效问题）
sunlizhen的专栏
03-07 6081
1. 为什么有的时候value时效呢 主要要说一下注意事项： select组件可以动态生成option选项，option选项绑定对应的文本值和value值。 有时候我们发现 默认显示的内容会显示具体的value值而不是对应的文本，这种情况原因都是： v-model绑定的值与option选项value值类型不符， 常规就是number与string 通用我们会循环一个数组、对象生成opt...
在element-ui的select下拉框加上滚动加载
10-17
Element-UI的`<el-select>`组件提供了一个方便的方式来选择数据，但默认情况下，当数据量过大时，一次性加载所有选项可能会导致页面性能下降。为了解决这个问题，我们可以实现一个滚动加载功能，即在用户滚动到...
vue Element el-checkbox 赋值不生效
weixin_38969022的博客
05-18 2382
循环里使用el-checkbox v-model 不生效 使用:value 解决此问题 <el-checkbox :value="allotDetailObj.ischeck?true:false" :disabled='allotDetailObj.status == "X" || allotDetailObj.status == "="? true:false' label="禁用" border @change="handleDisable"> </el-chec...
elementUI使用checkboxgroup组件，获得value的数字集合，而不是label的文字集合 - 解决篇
草巾冒小子的博客
07-21 1万+
全部代码如下： <template> <div id="htmlWrap" v-loading="isLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)...
el-checkbox-group中常遇到的问题
hff945的博客
06-30 981
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">All</el-checkbox> <el-checkbox-group v-model="checkedTypes" @change="handleCheckedTypesChange"> <el-checkbox style="width:150px;" v-for=
element-ui的el-table更改筛选值filtered-value后不起作用
changyana的博客
11-24 2971
按照一般的思维，当我在js里赋值 this.filter_value = [‘111’, ‘222’] 之后，table表格应该只加载出topic_name=‘111’和topic_name=‘222’的行信息。但是通过js动态改变筛选数组后，筛选出来的数据还是首次的筛选数组的内容。
elementui中form表单 resetFields 失效
pingfanblog
04-24 360
elementui form表单使用 resetFields方法失效
elementUI select组件默认选中效果实现的方法
10-17
`el-select`组件的`v-model`绑定的值是当前被选中的`el-option`的`value`属性。这意味着你需要将你想要默认选中的选项的`value`值与`v-model`绑定的变量相匹配，以实现选中效果。 在HTML模板中，`el-select`组件...
解决antd 表单设置默认值initialValue后验证失效的问题
01-21
getFieldDecorator('userName', { initialValue: 'Tom' },{ rules: [{ required: true, message: '请输入用户名', }], })( <Input placeholder='\u8bf7\u8f93\u5165\u7528\u6237\u540d'/> ) } </...
layui 中select下拉change事件失效的解决方法
01-21
layui 中select下拉change事件失效的处理方法 1.select中添加 lay-filter=“test” <select lay-filter=test></select> 2.处方方法 form.on('select(test)', function(data){ console.log(data.elem)...
解决layui中onchange失效以及form动态渲染失效的问题
10-16
然而，在实际使用过程中，开发者可能会遇到一些意料之外的问题，比如onchange事件失效和form动态渲染失效。本文将详细探讨这两个问题的解决方案。 首先，我们来看`onchange`事件失效的问题。在jQuery中，我们通常会...
el-checkbox的基本使用，避坑指南
热门推荐
weixin_46724415的博客
11-01 2万+
el-checkbox的基本使用，避坑指南 使用el-checkbox勾选出现的问题：全选不生效，全选后底下的勾选不能回显
ElementUI使用timePicker时默认值default-value问题以及选择范围select-options问题
m0_37678652的博客
08-16 1万+
在时间选择器使用时，因为ElementUI官方默认选择器打开时的默认时间是当前时间，当我们需要手动设置一点击该选择器展现的默认时间时，官方也提供了dafault-value属性，如下图： 该值绑定的是一个Date对象可被解析，所以我们可以默认绑定属性，通过在VUE渲染完成时给该属性赋值，这样就可以解决打开timePicker时自定义默认值的问题。 // 1.在data中定义属性 data{ defalutValue: null } // 2.将该属性绑定到对应的timePicker上 &l.
【FAQ】解决Element UI Form resetFields、clearValidate不起效和不显示验证状态等问题
朝拜者
07-02 5789
解决Element UI Form resetFields、clearValidate不起效和不显示验证状态等问题
2021.10.27 element的表单使用自定义组件时，校验监测不到value改变
一只白猫罢了
10-27 1577
遇到个bug： 表单上传文件后，明明已经有内容了，字段提示校验还存在。 rule = [{ required: true, message: `请上传${item.title}`, trigger: 'change' }] 解决过程： 以为是校验方法有问题，自己写了个针对附件上传的校验： const validatePass = (rule, value, callback) => { if (value.length) { return callback(); } else
使用Element ui的from表单验证时，绑定的值无法在验证函数中获取值,恒为undefined的问题分析。
陈先生的博客
12-13 2601
在最近使用element ui的form表单功能进行开发时，通过prop绑定时，无法正确的获取value值，一直输出为undefined，通过调查发现，目前el-form的model主要用表单验证的，也就是配合el-form的rules和el-form-item的prop来使用的。上面是个错误的示范，如果把要验证的数据放在了model绑定的对象外，那么就无法获得数据，验证规则内会一直得到undefined。当你已经对该属性进行绑定后，那么接下来，你的表单的prop默认绑定的值就是model绑定的对象的值。
关于element ui TimePicker 时间选择器 default-value默认值问题
最新发布
qq_42207504的博客
09-19 1721
用法 new Date(0, 0, 0, hour, minute, 0)因为美国时间所以更改了时区。
解决 Vue 动态生成 el-checkbox 点击无法赋值问题
蜗牛
12-15 1870
最近遇到一个问题，在一个页面需要动态渲染页面内的表单，其中包括 checkbox 表单类型，并且使用 Element 组件 UI 时，此时 v-model 绑定的数据也是动态生成的 例如： 定义的 data 的 form 里面是空对象，需要动态生成里面的 key export default { data() { return { form: {} } }, } 从后端接口得到 checkList，这个就是动态生成的表单数据 v-for 循环 checkList，..
elementui select数据回显
09-12
在Element UI中，实现select数据回显的关键是确保回显的值与定义在data中的options中的value的类型一致。如果回显的值的类型与options中的value的类型不一致，回显会失败。例如，如果options中的value为number类型，在回显时，回显的值也必须是number类型。 可以通过给data中定义的value直接赋值来实现回显，但有时候会出现意外的失效情况。为了解决这个问题，可以参考以下步骤： 1. 在data中定义要回显的select下拉框的value值为指定的类型，例如number类型。 2. 确保回显的数据中，value的类型与定义在data中options中的value的类型相匹配。 3. 使用v-model绑定select组件，并将回显的值赋给v-model绑定的变量。 参考示例代码如下： export default { data() { return { options: [{ value: 1, label: '黄金糕' }], value: 1 // 与options中的value类型相匹配 } } } 当需要回显的数据为options中的value值时，请确保回显的value值的类型与定义在data中options的value值的类型相匹配。通过以上步骤，就可以实现element-ui select组件的数据回显。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值