1. 程式人生 > >element el-table resetfields() 不生效

element el-table resetfields() 不生效

圖片 生效 pos fix inf tro fields 分享圖片 pan

表單中的重置按鈕不生效的問題,結合文檔對照後,發現是沒有為el-form-item設置prop字段

技術分享圖片

所以,想讓resetfields()生效有2個前提:

  • form要設置ref,且ref值要與 this.$refs[formName].resetFields()中的foemName一致
  • el-form-item上設置prop字段,表單rule驗證和resetfields() 清理的都是prop綁定的字段

註:this.$refs[formName].resetFields()只是將查詢條件初始化,所以在初始化時綁定什麽值就還是什麽值,並不是全部置為空。

 <el-form label-position="right" label-width="100px" ref="formList" :model="formList">
    <el-col :span=‘8‘>
       <el-form-item label="輸入搜索" prop="inputSearch">
           <el-input
              placeholder
=‘輸入關鍵字‘ 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="選擇日期" 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="是否選擇" 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();
   }
}

element el-table resetfields() 不生效