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

更新时间：2025年01月09日 15:37:07 作者：满分观察网友z

本文主要介绍了在使用Element UI的下拉输入框时,点击重置按钮后输入框无法回显数据的问题,具有一定的参考价值,感兴趣的可以了解一下

描述

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

请添加图片描述

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

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

注意：一定要加上prop，否则无法清除

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

在这里插入图片描述

原因

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

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

这时候就有两种解决方法

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

问题重现

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

请添加图片描述

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<template>
  <div style="margin-top: 100px">
    <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(formName) {
      console.log("form", this.form);
      this.$refs[formName].resetFields();
    },
  },
};
</script>

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

解决方案

方法一

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

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

在这里插入图片描述

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

方法二

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

<template>
  <div style="margin-top: 100px">
    <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) {
      // 判断对象是否为非对象或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" scoped></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>
    <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无法回显内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

element-ui之解决select无法回显的问题

Vue2单一事件管理组件通信
这篇文章主要为大家详细介绍了Vue2单一事件管理组件通信的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
Vue3中echarts无法缩放的问题及解决方案
很多朋友在使用vue3+echarts5技术时会遇到echarts无法绽放的问题，今天小编就给大家分享下问题描述及解决方案，感兴趣的朋友跟随小编一起看看吧
2022-11-11
Vue自定义询问弹框和输入弹框的示例代码
这篇文章主要介绍了Vue自定义询问弹框和输入弹框,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-06-06
详解vue事件对象、冒泡、阻止默认行为
本篇文章主要介绍了详解vue事件对象、冒泡、阻止默认行为，这里整理了详细的代码,有需要的小伙伴可以参考下。
2017-03-03
在Vue中实现不刷新的iframe页面的方案
在Vue项目中,我们可能会遇到这样的需求：需要在应用中嵌入iframe页面,并且要求在路由切换的过程中,iframe的内容不会被刷新,本文将介绍如何解决这个问题,并给出具体的实现方案,需要的朋友可以参考下
2025-01-01
vuex中使用对象展开运算符的示例
本篇文章主要介绍了vuex中使用对象展开运算符的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
vue项目中使用fetch的实现方法
这篇文章主要介绍了vue项目中使用fetch的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
LogicFlow插件使用前准备详解
这篇文章主要为大家介绍了LogicFlow插件使用前准备详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
从零开始在NPM上发布一个Vue组件的方法步骤
这篇文章主要介绍了从零开始在NPM上发布一个Vue组件的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
vue时间转换的几种方式
这篇文章主要介绍了vue时间转换的几种方式,需要的朋友可以参考下
2022-05-05