element-ui下拉輸入框+resetFields無(wú)法回顯的問(wèn)題解決

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

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

描述

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

請(qǐng)?zhí)砑訄D片描述

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

resetFields的作用：對(duì)整個(gè)表單進(jìn)行重置，將所有字段重置為初始值（而不是設(shè)置為空值）并移除校驗(yàn)結(jié)果

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

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

在這里插入圖片描述

原因

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

外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳

這時(shí)候就有兩種解決方法

給表單初始值，讓它變成響應(yīng)式，但是如果表單內(nèi)容有100個(gè)的話，得一個(gè)個(gè)加。
清空的時(shí)候，不必使用表單的清除屬性resetField，而是使用封裝好的清空對(duì)象方法。

問(wèn)題重現(xiàn)

這里只給了請(qǐng)假類型初始值，而未給請(qǐng)假方式初始值。

請(qǐng)?zhí)砑訄D片描述

外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳

<template>
  <div style="margin-top: 100px">
    <el-form
      :model="form"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="請(qǐng)假類型" prop="leaveType">
        <el-select v-model="form.leaveType" placeholder="請(qǐng)選擇請(qǐng)假類型">
          <el-option label="事假" value="1"></el-option>
          <el-option label="病假" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="請(qǐng)假方式" prop="leaveWay">
        <el-select v-model="form.leaveWay" placeholder="請(qǐng)選擇請(qǐng)假方式">
          <el-option label="單次請(qǐng)假" value="1"></el-option>
          <el-option label="長(zhǎng)期請(qǐng)假" 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>

解決方案

方法一

給表單初始值，讓它變成響應(yīng)式，可以很明顯地看到表單的初始化內(nèi)容，都有響應(yīng)式。

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

在這里插入圖片描述

缺點(diǎn)是需要一個(gè)個(gè)加，很費(fèi)時(shí)間。

方法二

不使用表單的resetFields清空表單，而是使用清空對(duì)象的cleanObject方法。

<template>
  <div style="margin-top: 100px">
    <el-form
      :model="form"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="請(qǐng)假類型" prop="leaveType">
        <el-select v-model="form.leaveType" placeholder="請(qǐng)選擇請(qǐng)假類型">
          <el-option label="事假" value="1"></el-option>
          <el-option label="病假" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="請(qǐng)假方式" prop="leaveWay">
        <el-select v-model="form.leaveWay" placeholder="請(qǐng)選擇請(qǐng)假方式">
          <el-option label="單次請(qǐng)假" value="1"></el-option>
          <el-option label="長(zhǎng)期請(qǐng)假" 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) {
      // 判斷對(duì)象是否為非對(duì)象或null
      if (typeof obj !== "object" || obj === null) {
        return obj;
      }

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

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

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

總結(jié)

實(shí)際場(chǎng)景用方法二會(huì)比較好點(diǎn)，如果有100個(gè)下拉框，給初始值的話，那你就要給100個(gè)內(nèi)容進(jìn)行初始化，很浪費(fèi)時(shí)間。在vue3中也存在這樣的情況，不知道這是不是resetFields遺留下來(lái)的bug，還需要看一下resetFields的源碼。具體的原理還需要大家在評(píng)論區(qū)進(jìn)行補(bǔ)充，附上vue3試驗(yàn)的代碼。

<template>
  <el-form :model="form" ref="form" label-width="100px" class="demo-ruleForm">
    <el-form-item label="請(qǐng)假類型" prop="leaveType">
      <el-select v-model="form.leaveType" placeholder="請(qǐng)選擇請(qǐng)假類型">
        <el-option label="事假" value="1"></el-option>
        <el-option label="病假" value="2"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="請(qǐng)假方式" prop="leaveWay">
      <el-select v-model="form.leaveWay" placeholder="請(qǐng)選擇請(qǐng)假方式">
        <el-option label="單次請(qǐng)假" value="1"></el-option>
        <el-option label="長(zhǎng)期請(qǐng)假" 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>

到此這篇關(guān)于element-ui下拉輸入框+resetFields無(wú)法回顯的問(wèn)題解決的文章就介紹到這了,更多相關(guān)element resetFields無(wú)法回顯內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: