element-ui下拉输入框+resetFields无法回显的问题解决

2025-01-10 16:50

本文主要是介绍element-ui下拉输入框+resetFields无法回显的问题解决,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

《element-ui下拉输入框+resetFields无法回显的问题解决》本文主要介绍了在使用ElementUI的下拉输入框时,点击重置按钮后输入框无法回显数据的问题,具有一定的参考价值,感兴趣的...

描述

第一次进入页面,不做任何操作,点击重置按钮,再进行下拉选择,输入框并不能回显数据,点击搜索后,选中的数据就能显示出来。

element-ui下拉输入框+resetFields无法回显的问题解决

重置代码,resetForm的底层用的是表单的resetFields。

resetFields的作用:对整个表单进行重置,将所有字段重置为初始值(而不是设置为空值)并移除校验结果

注意:一定要加上prop,否则无法清除

    // 重置按钮操作
    resetQuery: _.debounce(function () {
      //重置表单
      this.resetForm("queryForm");
      //搜索
      this.handleQuery();
    }, 500),

element-ui下拉输入框+resetFields无法回显的问题解决

原因

表单绑定的是搜索的对象内容,而表单的内容使用的是v-model来绑定,如果没给表单内容初始值,那么绑定的内容就不是响应式,打印出来也可以看见。所以就会出现搜索后才会回显选中的内容。

element-ui下拉输入框+resetFields无法回显的问题解决

这时候就有两种解决方法

  • 给表单初始值,让它变成响应式,但是如果表单内容有100个的话,得一个个加。
  • 清空的时候,不必使用表单的清除属性resetField,而是使用封装好的清空对象方法。

问题重现

这里只给了请假类型初始值,而未给请假方式初始值。

element-ui下拉输入框+resetFields无法回显的问题解决

element-ui下拉输入框+resetFields无法回显的问题解决

<template>
  <div>
    <el-form
      :model="form"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="请假类型" prop="leaveType">
        <el-select v-model="form.leaveType" placeholder="请选择请假类型">
          <el-option label="事假" value="1"></el-option>
          <el-option label="病假" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="请假方式" prop="leaveWay">
        <el-select v-model="form.leaveWay" placeholder="请选择请假方式">
          <el-option label="单次请假" value="1"></el-option>
          <el-option label="长期请假" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >确定</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        leaveType: "",
      },
    };
  },
  methods: {
    resetForm(fhttp://www.chinasem.cnormName) {
      console.log("form", this.form);
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped></style>

解决方案

方法一

给表单初始值,让它变成响应式,可以很明显地看到表单的初始化内容,都有响应式。

form: {
        leaveType: "",
        leaveWay: "",
      },

element-ui下拉输入框+resetFields无法回显的问题解决

缺点是需要一个个加,很费时间。

方法二

不使用表单的resetFields清空表单,而是使用清空对象的cleanObject方法。

<template>
  <div>
    <el-form
      :model="form"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="请假类型" prop="leaveType">
        <el-select v-model="form.leaveType" placeholder="请选择请假类型">
          <el-option label="事假" value="1"></el-option>
          <编程;el-option label="病假" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="请假方式" prop="leaveWay">
        <el-select v-model="form.leaveWay" placeholder="请选择请假方式">
          <el-option label="单次请假" value="1"></el-option>
          <el-option label="长期请假" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">确定</el-button>
        <el-button @click="resetForm(form)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {},
    };
  },
  methods: {
    resetForm(formName) {
      this.cleanObject(formName);
    },
    cleanObject(obj) {
http://www.chinasem.cn      // 判断对象是否为非对象或null
      if (typeof obj !== "object" || obj === null) {
        return obj;
      }

      // 判断对象是否为数组
      if (Array.isArray(obj)) {
        // 递归处理数组中的每个元素
        return obj.map((item) => this.cleanObject(item));
      }

      // 如果是对象,则遍历其属性
      for (const key in obj) {
        // 判断值是否为数组
        if (Array.isArray(obj[key])) {
          // 如果是数组,则将其置为空数组
          obj[key] = [];
        } else {
          // 递归处理对象中的每个值
          obj[key] = this.cleanObject(obj[key]);
        }
      }
    },
  },
};
</script>

<style lang="scss" www.chinasem.cnscoped></style>

总结

实际场景用方法二会比较好点,如果有100个下拉框,给初始值的话,那你就要给100个内容进行初始化,很浪费时间。在vue3中也存在这样的情况,不知道这是不是resetFields遗留下来的bug,还需要看一下resetFields的源码。具体的原理还需要大家在评论区进行补充,附上vue3试验的代码。

<template>
  <el-form :model="form" ref="form" label-width="100px" class="demo-ruleForm">
    <el-form-item label="请假类型" prop="leaveType">
      <el-select v-model="form.leaveType" placeholder="请选择请假类型">
        <el-option label="事假" value="1"></el-option>
        <el-option label="病假" value="2"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="请假方式" prop="leaveWay">
      <el-select v-model="form.leaveWay" placeholder="请选择请假方式">
        <el-option label="单次请假" value="1"></el-option>
        <el-option label="长期请假" value="2"></el-option>
      </el-select>
    </el-form-item>
    &jslt;el-form-item>
      <el-button type="primary">确定</el-button>
      <el-button @click="resetForm(form)">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref } from "vue";

const form = ref({});

const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>

到此这篇关于element-ui下拉输入框+resetFields无法回显的问题解决的文章就介绍到这了,更多相关element resetFields无法回显内容请搜索China编程(www.chinasem.cn)以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程China编程(www.chinasem.cn)! 

这篇关于element-ui下拉输入框+resetFields无法回显的问题解决的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1153020

相关文章

Redis分片集群、数据读写规则问题小结

《Redis分片集群、数据读写规则问题小结》本文介绍了Redis分片集群的原理,通过数据分片和哈希槽机制解决单机内存限制与写瓶颈问题,实现分布式存储和高并发处理,但存在通信开销大、维护复杂及对事务支持... 目录一、分片集群解android决的问题二、分片集群图解 分片集群特征如何解决的上述问题?(与哨兵模

SpringBoot+Redis防止接口重复提交问题

《SpringBoot+Redis防止接口重复提交问题》:本文主要介绍SpringBoot+Redis防止接口重复提交问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不... 目录前言实现思路代码示例测试总结前言在项目的使用使用过程中,经常会出现某些操作在短时间内频繁提交。例

解决Entity Framework中自增主键的问题

《解决EntityFramework中自增主键的问题》:本文主要介绍解决EntityFramework中自增主键的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝... 目录Entity Framework中自增主键问题解决办法1解决办法2解决办法3总结Entity Fram

Nginx 配置跨域的实现及常见问题解决

《Nginx配置跨域的实现及常见问题解决》本文主要介绍了Nginx配置跨域的实现及常见问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来... 目录1. 跨域1.1 同源策略1.2 跨域资源共享(CORS)2. Nginx 配置跨域的场景2.1

qt5cored.dll报错怎么解决? 电脑qt5cored.dll文件丢失修复技巧

《qt5cored.dll报错怎么解决?电脑qt5cored.dll文件丢失修复技巧》在进行软件安装或运行程序时,有时会遇到由于找不到qt5core.dll,无法继续执行代码,这个问题可能是由于该文... 遇到qt5cored.dll文件错误时,可能会导致基于 Qt 开发的应用程序无法正常运行或启动。这种错

SpringBoot排查和解决JSON解析错误(400 Bad Request)的方法

《SpringBoot排查和解决JSON解析错误(400BadRequest)的方法》在开发SpringBootRESTfulAPI时,客户端与服务端的数据交互通常使用JSON格式,然而,JSON... 目录问题背景1. 问题描述2. 错误分析解决方案1. 手动重新输入jsON2. 使用工具清理JSON3.

MySQL 设置AUTO_INCREMENT 无效的问题解决

《MySQL设置AUTO_INCREMENT无效的问题解决》本文主要介绍了MySQL设置AUTO_INCREMENT无效的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参... 目录快速设置mysql的auto_increment参数一、修改 AUTO_INCREMENT 的值。

关于跨域无效的问题及解决(java后端方案)

《关于跨域无效的问题及解决(java后端方案)》:本文主要介绍关于跨域无效的问题及解决(java后端方案),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录通用后端跨域方法1、@CrossOrigin 注解2、springboot2.0 实现WebMvcConfig

Go语言中泄漏缓冲区的问题解决

《Go语言中泄漏缓冲区的问题解决》缓冲区是一种常见的数据结构,常被用于在不同的并发单元之间传递数据,然而,若缓冲区使用不当,就可能引发泄漏缓冲区问题,本文就来介绍一下问题的解决,感兴趣的可以了解一下... 目录引言泄漏缓冲区的基本概念代码示例:泄漏缓冲区的产生项目场景:Web 服务器中的请求缓冲场景描述代码

Java死锁问题解决方案及示例详解

《Java死锁问题解决方案及示例详解》死锁是指两个或多个线程因争夺资源而相互等待,导致所有线程都无法继续执行的一种状态,本文给大家详细介绍了Java死锁问题解决方案详解及实践样例,需要的朋友可以参考下... 目录1、简述死锁的四个必要条件:2、死锁示例代码3、如何检测死锁?3.1 使用 jstack3.2