快捷導航

el-form組件使用resetFields重置失效的問題解決

更新時間：2023年12月22日 10:57:55 作者：Lucky1311

用el-form寫了包含三個字段的表單,使用resetFields方法進行重置,發(fā)現(xiàn)點擊重置或要清空校驗時是失效的,所以本文給大家介紹了el-form組件使用resetFields重置失效的問題解決,需要的朋友可以參考下

1. 問題

用el-form寫了包含三個字段的表單，使用resetFields方法進行重置，發(fā)現(xiàn)點擊重置或要清空校驗時是失效的。

在這里插入圖片描述

代碼：

<template>
  <div>
	<el-form :inline="true" size="mini" style="float: right" :model="queryParams.args" ref="queryForm">
	  <el-form-item label="姓名">
	      <el-input
	          style="width:160px"
	          size="mini"
	          placeholder=""
	          v-model.trim="queryParams.args.name"
	          clearable
	      ></el-input>
	  </el-form-item>
	  <el-form-item label="賬號">
	      <el-input
	          style="width:160px"
	          size="mini"
	          placeholder=""
	          v-model.trim="queryParams.args.no"
	          clearable
	      ></el-input>
	  </el-form-item>
	  <el-form-item label="性別">
	      <el-select v-model="queryParams.args.sex" placeholder="請選擇" clearable>
	        <el-option
	          v-for="item in options"
	          :key="item.value"
	          :label="item.label"
	          :value="item.value">
	        </el-option>
	      </el-select>
	  </el-form-item>
	  <el-form-item>
	    <el-button type="primary" @click.native="search" size="mini">查詢</el-button>
	    <el-button type="primary" @click.native="addUseroperator" size="mini">新增</el-button>
	    <el-button type="success" @click.native="reset" size="mini">重置</el-button>
	  </el-form-item>
	</el-form>
</div>
</template>
<script>
export default {
    data() {
      return {
        queryParams: {
          args:{
            name: "",
            no: "",
            sex: null
          }
        },
        options: [
          {value: 0, label: '女'},
          {value: 1, label: '男'}
        ]
      }
    },
    methods: {
    	reset(){
         this.$refs["queryForm"].resetFields()
      },
}
}
</script>

點擊重置按鈕后，仍不能清空重置該表單：

在這里插入圖片描述

剛開始以為是異步問題，在重置方法代碼上加上方法this.$nextTick(()=>{})：

methods: {
    	reset(){
	    	this.$nextTick(()=>{
				this.$refs["queryForm"].resetFields()
	        })
      },
}

測試后仍然沒有效果，只能下一步解決：

2. 解決

仔細檢查代碼后，可以發(fā)現(xiàn)el-form-item沒有添加prop屬性，導致識別不到相應(yīng)的字段屬性，注意這里有個坑：就是el-form這里要加上“:model”字段，我這里是加“:model=“queryParams.args”，如果不加，resetFields也會同樣失效。加上后的代碼如下：

<template>
  <div>
	<el-form :inline="true" size="mini" style="float: right" :model="queryParams.args" ref="queryForm">
	  <el-form-item label="姓名" prop="name">
	      <el-input
	          style="width:160px"
	          size="mini"
	          placeholder=""
	          v-model.trim="queryParams.args.name"
	          clearable
	      ></el-input>
	  </el-form-item>
	  <el-form-item label="賬號" prop="no">
	      <el-input
	          style="width:160px"
	          size="mini"
	          placeholder=""
	          v-model.trim="queryParams.args.no"
	          clearable
	      ></el-input>
	  </el-form-item>
	  <el-form-item label="性別" prop="sex">
	      <el-select v-model="queryParams.args.sex" placeholder="請選擇" clearable>
	        <el-option
	          v-for="item in options"
	          :key="item.value"
	          :label="item.label"
	          :value="item.value">
	        </el-option>
	      </el-select>
	  </el-form-item>
	  <el-form-item>
	    <el-button type="primary" @click.native="search" size="mini">查詢</el-button>
	    <el-button type="primary" @click.native="addUseroperator" size="mini">新增</el-button>
	    <el-button type="success" @click.native="reset" size="mini">重置</el-button>
	  </el-form-item>
	</el-form>
</div>
</template>
<script>
export default {
    data() {
      return {
        queryParams: {
          args:{
            name: "",
            no: "",
            sex: null
          }
        },
        options: [
          {value: 0, label: '女'},
          {value: 1, label: '男'}
        ]
      }
    },
    methods: {
    	reset(){
         this.$refs["queryForm"].resetFields()
      },
}
}
</script>

在這里插入圖片描述