vue+element select筛选框表单重置resetFields()失效

最新推荐文章于 2024-07-14 03:12:06 发布
最新推荐文章于 2024-07-14 03:12:06 发布
阅读量9.3k 收藏 6
点赞数 3
分类专栏： Vue element-ui 文章标签： vue element select重置 resetField()失效

本文转载自点此直达，感谢作者

今天下午在学习vue过程中遇到了一个小问题，那就是select表单重置利用resetField（）竟然失效，百思不得其解，便去网上查找解决方法，没想到原来是自己在el-form标签忘记加上 ref，看来自己的知识掌握的还是不牢固啊……看到有篇博客写的不错，把resetFields()失效的几种原因详细列出，特此告明作者转载算是作为自己的笔记吧，同时也分享给大家。

出现如题问题可以排查以下几个地方：

  1. el-form标签是否有加上 ref和model
    在这里插入图片描述
  2. el-form-item标签是否设置了对应的prop
    在这里插入图片描述
  3. form是否在data中设置了对象，格式如下
    在这里插入图片描述

以上几点必须同时满足才可生效!!!

iKendall
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
踩坑之在 vue+element select筛选框 重置resetFields()失效
candybaby1223的博客
06-22 5301
element select筛选框 重置办法 突然之间发现element 自带的重置组件resetFields() 只对input框 有效，下拉框，完全点不动。 需求如下 下拉框选择数值，点击重置，清空刚才你的选择。 1这里的 v-model="dataForm.year 和 v-model=“dataForm.month” 这两个属性很重要。 然后找到重置方法 <el-row> <el-col :span="6">
vue+element 模态框表格形式的可编辑表单实现
10-16
在本例中，我们将探讨如何利用Vue和Element UI来实现一个模态框内的表格形式的可编辑表单。 首先，模态框（Modal）是Element UI中的一个组件，它通常用于展示临时信息或者进行一些操作确认。通过`:visible.sync`...
​vue+element select筛选框表单重置resetFields()失效
Amelia_Liu的博客
04-02 386
本人在项目中使用form的resetFields方法重置搜索框，发现select和date-picker日期控件都不生效，input生效了，后面通过搜索发现是我没写prop属性 ，一加上立马生效。
【Vue入门实践3】不调后端接口==＞el-table单纯前端实现查询和重置功能==＞【el-table组件使用】表格静态前端筛选、查询重置功能
最新发布
2401_84433974的博客
07-14 169
大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。
elementUi重置表单清除校验resetFields()不起作用
lqlq54321的博客
10-21 1201
当我们清除校验时一般在关闭弹框的时候会使用 this.$refs[formData].resetFields(); <el-dialog title="新增xx公司" :visible.sync="addCompanyVisible" width="30%" :modal-append-to-body='false' class="urgecompany-dialog" @close="closeDialog" > <el-form class="
解决Element resetFields()重置表单不生效的问题
weixin_43258184的博客
12-07 173
解决Element resetFields()重置表单不生效的问题 原地址：https://segmentfault.com/a/1190000022516459
vue2/vue3 element 重置表单无效 resetFields()
jiaojinnaozhier的博客
08-12 1291
这个方法是将表单重置为初始值， 也就是说，是将表单中的数据重置为dom节点渲染时的值，而不是重置为空对象。无论你需不需要校验，都要加上prop属性，并且保证与v-model相匹配
【element-ui】element el-time-select组件 赋值问题
weixin_41105915的博客
12-13 2259
1，用这个组件的时候，发现对某个值进行修改的时候，值是赋上了，但是组件没有更新，点击后值又改变。 2，前端代码 <el-form-item label="开放开始时间" prop="startTime"> <template> <el-time-select placeholder="起始时间" v-model="form.startTime" ...
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
10-14
在Vue和Element-UI的开发过程中，我们常常遇到表单重置的问题，特别是当使用`resetFields()`方法时发现表单并未如预期那样被重置。这个问题通常涉及到多个方面，让我们逐一探讨解决方法。 首先，确保在HTML模板中...
基于vue + element UI 的后台管理系统模板
09-12
Element UI 是一套基于 Vue.js 的开源UI组件库，由饿了么团队开发，提供了一系列完善的企业级组件，如表格、按钮、提示、下拉框、导航、弹窗等。Element UI的设计理念是“简单、实用”，它的组件样式统一且易于定制...
vue+element实现大文件上传
07-04
vue+element实现大文件上传
以DonetCore+vue+Element搭建的简单框架
09-30
Element-UI是基于Vue.js的UI组件库，设计风格简约大方，提供了丰富的组件，如表格、按钮、表单、导航、弹窗等，极大地简化了前端界面的开发工作。在我们的项目中，Element-UI将用于构建用户界面，提供一致的视觉体验...
vue3中，封装el-select选择器组件(一)——表单四等分布局、查询、重置resetFields、el-date-picker起止日期、特殊字符校验、自定义指令v-throttle用于按钮防抖
weixin_44867717的博客
09-06 1025
效果/*** @description 自定义指令v-throttle*/if (!
Vue 2 + Element UI 选择一个el-select清空另一个el-select选中的值
EFFY
06-05 506
尝试过this.$refs['form'].resetFields('field name');需求：表单中有两个下拉选择器，先选中第一个，清空第二个选中的值。先选择商品分类，再去选择商品列表中的某一件商品。
Element UI 实战：表单提交按钮、重置按钮以及 resetFields() 不生效解决方案
taoqidejingling的博客
10-04 3005
https://www.cnblogs.com/lemoncool/p/10251115.html
使用ELementPlus表单的resetFields不生效
qq_47101042的博客
07-15 192
vue3 elementplus使用resetFields()清空无效问题
vue3+element-plus表单重置resetFields方法不生效踩坑
热门推荐
YSQ_qsy的博客
08-05 1万+
vue3+element-plus表单重置resetFields方法有时不生效
vue Form表单 resetFields()方法失效解决方法
aj951225的博客
07-07 1249
首先确定v-model绑定值是否正确 验证项的type类型是否为所需类型，默认为string 若有某一元素控制必填项是否显示，将v-if 替换成v-show （v-if会删除掉当前dom元素，导致必填项索引定位错误，因此采用v-show。） ...
vue+element 多选框实现功能
07-12
要实现 Vue 和 Element-ui 的多选框功能，你可以按照以下步骤进行操作： 1. 首先，确保你已经安装了 Vue 和 Element-ui。可以通过 npm 或者 yarn 进行安装。 2. 在你的 Vue 组件中，引入需要的 Element-ui 组件。多选框对应的组件是 `el-checkbox`。 3. 在模板中使用 `el-checkbox` 组件来创建多选框。可以使用 `v-model` 指令来绑定多选框的值，以及设置多选框的选中状态。 ```html <template> <div> <el-checkbox v-model="checkedOptions" label="Option 1">Option 1</el-checkbox> <el-checkbox v-model="checkedOptions" label="Option 2">Option 2</el-checkbox> <el-checkbox v-model="checkedOptions" label="Option 3">Option 3</el-checkbox> </div> </template> ``` 4. 在 Vue 组件的 `data` 选项中定义一个数组来存储多选框的选中值。 ```javascript <script> export default { data() { return { checkedOptions: [] // 存储选中值的数组 }; } }; </script> ``` 5. 通过 `checkedOptions` 数组来获取和操作多选框的选中值。 ```javascript // 获取所有选中的值 console.log(this.checkedOptions); // 判断某个选项是否被选中 if (this.checkedOptions.includes('Option 1')) { // 做一些操作 } ``` 这样，你就可以在 Vue 和 Element-ui 中使用多选框了。根据你的实际需求，可以进行进一步的样式和功能定制。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值