element el-table resetfields() does not take effect

• Blog garden
• Home
• New essay
• contact
• subscription
• management

element el-table resetfields() does not take effect

Problem scenario

The reset button in the form calls the resetfields() method and does not take effect

problem causes

After comparing the documents, it is found that the prop field is not set for el-form-item

to sum up

There are two prerequisites for resetfields() to take effect:

• The form should be set to ref, and the ref value should be consistent with the foemName in this.$refs[formName].resetFields()
• Set prop fields on el-form-item, form rule validation and resetfields() clean up fields bound to prop

Note: this.$refs[formName].resetFields() only initializes the query conditions, so the value bound to it during initialization is the same value, not all of them are empty.

 <el-form label-position="right" label-width="100px" ref="formList" :model="formList">
    <el-col :span='8'>
       <el-form-item label="input search" prop="inputSearch">
           <el-input
              placeholder='Enter keywords'
              prefix-icon='el-icon-search'
              v-model='formList.inputSearch'
              style="width: 100%;" clearable>
           </el-input>
         </el-form-item>
     </el-col>
     <el-col :span='8'>
         <el-form-item label="日期" prop="endDate">
             <el-date-picker
                v-model="formList.endDate"
                type="date"
                placeholder="Select a date"
                value-format="yyyy-MM-dd"
                style="width: 100%;"
                :picker-options='pickerOptions'>
             </el-date-picker>
          </el-form-item>
     </el-col>
     <el-col :span='8'>
         <el-form-item label="Whether to choose" prop="isUpToDate">
              <el-select v-model='formList.isUpToDate' placeholder='是否选择' style="width: 100%;">
                  <el-option
                      v-for='select in selects'
                      :key='select.value'
                      :label='select.label'
                      :value='select.value'>
                   </el-option>
               </el-select>
          </el-form-item>
      </el-col>
      <el-col :span='8'>
          <el-form-item>
               <el-button @click="resetForm('formList')">重置</el-button>
               <el-button @click="queryData">查询</el-button>
          </el-form-item>
      </el-col>
</el-form>

 

 data () {
      return {
         formList: {
             inputSearch: '',                   
             endDate: '',
              isUpToDate: ''                     
         }
      };
   },
 methods: {
    resetForm (formName) {
       this.$refs[formName].resetFields();
   }
}

 

mounted() {
      if (this.prop) {
        this.dispatch('ElForm', 'el.form.addField', [this]);

        let initialValue = this.fieldValue;
        if (Array.isArray(initialValue)) {
          initialValue = [].concat(initialValue);
        }
        Object.defineProperty(this, 'initialValue', {
          value: initialValue
        });

        this.addValidateEvents();
      }
    },