element-ui下拉輸入框+resetFields無法回顯的問題解決

更新時間：2025年01月09日 15:37:07 作者：滿分觀察網(wǎng)友z

本文主要介紹了在使用Element?UI的下拉輸入框時,點擊重置按鈕后輸入框無法回顯數(shù)據(jù)的問題,具有一定的參考價值,感興趣的可以了解一下

描述

第一次進入頁面，不做任何操作，點擊重置按鈕，再進行下拉選擇，輸入框并不能回顯數(shù)據(jù)，點擊搜索后，選中的數(shù)據(jù)就能顯示出來。

請?zhí)砑訄D片描述

重置代碼，resetForm的底層用的是表單的resetFields。

resetFields的作用：對整個表單進行重置，將所有字段重置為初始值（而不是設置為空值）并移除校驗結果

注意：一定要加上prop，否則無法清除

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

在這里插入圖片描述

原因

表單綁定的是搜索的對象內容，而表單的內容使用的是v-model來綁定，如果沒給表單內容初始值，那么綁定的內容就不是響應式，打印出來也可以看見。所以就會出現(xiàn)搜索后才會回顯選中的內容。

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

這時候就有兩種解決方法

給表單初始值，讓它變成響應式，但是如果表單內容有100個的話，得一個個加。
清空的時候，不必使用表單的清除屬性resetField，而是使用封裝好的清空對象方法。

問題重現(xiàn)

這里只給了請假類型初始值，而未給請假方式初始值。

請?zhí)砑訄D片描述

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

<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;
      }

      // 判斷對象是否為數(shù)組
      if (Array.isArray(obj)) {
        // 遞歸處理數(shù)組中的每個元素
        return obj.map((item) => this.cleanObject(item));
      }

      // 如果是對象，則遍歷其屬性
      for (const key in obj) {
        // 判斷值是否為數(shù)組
        if (Array.isArray(obj[key])) {
          // 如果是數(shù)組，則將其置為空數(shù)組
          obj[key] = [];
        } else {
          // 遞歸處理對象中的每個值
          obj[key] = this.cleanObject(obj[key]);
        }
      }
    },
  },
};
</script>

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

總結

實際場景用方法二會比較好點，如果有100個下拉框，給初始值的話，那你就要給100個內容進行初始化，很浪費時間。在vue3中也存在這樣的情況，不知道這是不是resetFields遺留下來的bug，還需要看一下resetFields的源碼。具體的原理還需要大家在評論區(qū)進行補充，附上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無法回顯內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: