el-select 校验 取对象 赋值 置空

最新推荐文章于 2024-07-16 15:48:23 发布
最新推荐文章于 2024-07-16 15:48:23 发布
阅读量1.9k 收藏
点赞数
分类专栏： 代码那些事 文章标签： javascript 前端 vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iSmilee/article/details/121761313
版权
在Vue.js中使用ElementUI的el-select组件，遇到需要清空选项并获取选中项完整属性的业务场景。通过结合1 2两个步骤，实现了基于id的校验同时返回选中项的所有属性。利用this.$set()方法进行值的设置和清空操作。
摘要由CSDN通过智能技术生成

业务场景：
当前下拉框的选项和对象均被重置（选项置空），并且要得到选择的item的整个属性，不止id。

	<el-select 
		v-model="form.id" 
		value-key="id"  // 1
		@change="handleChange"
	>
		<el-option 
			v-for=
最低0.47元/天 解锁文章
BlueBlue_oO
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 将el-select值置空后出现无法选择问题分析
News777的博客
10-10 2369
Vue 将el-select值置空后出现无法选择问题分析
el-select绑定值为对象时校验必填失效问题记录
Komorebi_00的博客
05-05 917
el-select绑定对象实现分页下拉查询报销人功能，修改回显时清空报销人没有触发必填校验问题解决方法
el-select绑定对象并可以实现回显
Anyuegogogo的博客
05-28 4600
<el-select v-model="scope.row.rowItem" placeholder="请选择" @change="changeHandle(scope.row.rowItem, index, scope.$index)" clearable value-key="rowIndex"> <el-option v-for="item in optionsData..
深入探索Element UI中el-input与el-select的非空校验艺术
最新发布
2301_78183352的博客
07-16 529
通过上述实践，我们不难发现，Element UI为el-input和el-select等组件提供了强大而灵活的验证机制。无论是基础的非空校验，还是更复杂的自定义验证规则，都能轻松实现。作为开发者。
【Vue 学习】- VueJS 生命周期
ONESTARの博客
12-27 1217
一、概述 Vue 的生命周期可以分为 8 个生命周期的执行点，从 new 创建 Vue 对象到对象的销毁，其中 4 个基本的，4 个特殊的，在下图中，红色标注的就是 8 个生命周期的执行点，前四个为基本的，后四个为特殊的 四个基本执行点（数据加载）： beforeCreadted： 实例组件刚创建，元素DOM和数据都还没有初始化，loading事件 created： 数据dat...
el-select下拉框选中为空
牛逼的博客
09-23 2412
el-select下拉框选中为空 主要是缺少data <vxe-form-item title=“计算依据” :span=“8” #default="{ data }"> <el-select placeholder="" v-model=“cbDatas.jsyj” @change=“jsyjChange” clearable > vxe-option v-for=“dict in jsyjlist” :key=“dict.dictValue” :label=“dict.dic
vue el-select初始化加载时候置空_小白也能懂的VUE的生命周期探寻
weixin_39631316的博客
11-21 203
Vue生命周期作为vue的核心之一，生命周期不管是文档还是面试都是高频知识点今天我们从什么是生命周期，生命周期的内容，如何利用生命周期出发，做一些探究生命周期的理解官方：Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期通俗的说：当加载一个页面的时候，会创建一个vue实例来展示这个页面...
elementUI之el-select选择器赋值为空后无法选中回显
weixin_42678822的博客
04-29 1154
【代码】elementUI之el-select选择器赋值为空后无法选中回显。
element中el-select绑定值为对象并回显问题
热门推荐
qq_42092195的博客
03-03 1万+
element 中el-select 绑定值为对象时，重新编辑时，不显示已选择的选项
el-form表单中对不同的下拉项（el-select）的选择，提交时的校验提示问题的解决 —— vue
weixin_46419373的博客
07-02 2618
—— 上篇博客：弹窗封装 前言 在写这篇博客前，大家可能对我上篇的博客（自定义弹框）的使用还有点迷茫，因此接下来我会首先根据我上一篇的弹框封装来作为这篇博客的开头 一、弹框使用 1、效果 点击新增会有一个弹框 2、代码 二、今天的主题（下拉值不一样，提交校验的问题） 1、先看几个图 问题描述： 从图一可以看出，只要我上一篇的博客能看懂的话，那么图一的样式以及校验都可以根据element-ui来实现。现在的问题是，从图一都知道，第一个下拉框有三个值，银行，微信和支付宝。然后从图二和
elementUI el-select多选设置必填和非必填反显时表单验证不通过
vicky_minmin的博客
01-13 6843
最近碰到了一个需求，让一个字段动态设置必填和非必填 借鉴了https://blog.csdn.net/weixin_37865166/article/details/92431597这篇文件，默认在初始页面完成后 computed: { isHaveTo: function() { return this.isOfficeHaveTo } }, 此处需要注意的是isHaveTo的初始化。 而isOfficeHaveTo则是根据数据和字段，动态更改的的属性。 isHaveTo
Element-UI el-select多选表单校验问题
qq_43235503的博客
05-17 2947
Element-UI el-select多选表单校验问题
关于el-select自动校验的问题
qq_41988415的博客
07-27 2613
首次加载页面或刷新页面会触发select选择框校验
为Element框架的＜el-select/＞组件添加输入校验
总柴的博客
05-31 2197
为Element框架的组件添加输入校验 需求分析： <el-select filterable>...</el-select>组件为可输入搜索字段的选择框，但组件知道的@change事件并不会为输入进行事件触发，但需求需要为其进行输入校验。 解决方法： 首先找到组件里面的<input>元素。 然后为其只读属性设置为false。 最后为其添加input事件，并设置执行函数。 代码展示： <template> <div class="countries-s
表单校验问题——el-select（初始化页面自动触发校验解决办法）
XIAO_A_fighting的博客
06-28 6313
情景：为表单添加校验功能：填好信息后，点击提交按钮，触发校验。bug：当触发过校验函数后，再次进入表单页面，会自动触发添加了multiple属性的el-select组件的表单校验。el-select绑定的数据为null，就会触发change事件，从而开启了表单校验将v-model的初始值修改为空数组即可。...
关于Element-UI el-select多选表单校验问题
csdn6107的博客
07-26 7174
在使用 el-select 多选下拉菜单配置表单校验时， 如果form表单绑定的form对象对应属性值为空字符串或者null（其他未尝试），表单中的多选下拉框会立刻执行校验并弹出校验信息
el-select multiple表单校验问题
askuld的博客
12-20 1392
prop属性、rules校验是否正确，这里注意el-select的rules校验的trigger应该是change。如果以上都没问题，那么还有一个原因就是：嵌套太深，导致form检测不到ruleForm的变化。2、选中下拉数据，不会再次触发校验，导致提示文字一直存在。至此，完美解决el-select复选框表单校验。记录一个el-select复选框表单校验例子。注意rule中验证方式应该是“change”1）添加form表单:rule方式验证。2）给下拉框添加change函数。1、一打开页面就会触发校验。
el-select校验
06-10
要对 el-select 进行校验，可以使用 Element UI 提供的表单验证功能。具体步骤如下： 1. 在 el-select 上添加 ref 属性，用于在代码中获取 el-select 的实例。 ```html <el-form-item label="选择项" prop="selectItem"> <el-select v-model="selectItem" placeholder="请选择" ref="selectItem"> <el-option label="选项一" value="1"></el-option> <el-option label="选项二" value="2"></el-option> <el-option label="选项三" value="3"></el-option> </el-select> </el-form-item> ``` 2. 在 el-form 上设置 rules 属性，用于指定 el-select 的校验规则。 ```html <el-form :model="form" :rules="rules" ref="form"> <!-- el-select 代码省略 --> </el-form> ``` ```javascript data() { return { form: { selectItem: '' }, rules: { selectItem: [ { required: true, message: '请选择选项', trigger: 'change' } ] } } } ``` 3. 在提交表单时，调用 el-form 的 validate 方法，对 el-select 进行校验。 ```javascript submitForm() { this.$refs.form.validate(valid => { if (valid) { // 表单校验通过 // 其他代码省略 } else { // 表单校验失败 return false; } }); } ``` 以上就是使用 Element UI 进行 el-select 校验的步骤。其中，校验规则可以根据实际需求进行修改。如果需要自定义校验规则，可以在 rules 中添加自定义校验函数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值