elementui resetFields不起作用麻烦大家了 在线等 调了很多次

Question

题目描述

点击resetForm 表单应该重置，可以并没有

题目来源及自己的思路

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

<div class="selectWrap">

    <el-form :model = "form" ref="dataForm">
      <div class="clearfix">
        <div class="select-item selectDIV ershisan">
          <el-form-item prop="reset">
            <el-button @click="resetForm" class="dagongji">地图展示</el-button>
          </el-form-item>
          <!--<a @click="resetForm" class="dagongji">地图展示</a>-->
          <el-form-item prop="selectarea">
            <el-select class="bashisan" @change="search" style="width: 100%" v-model="form.area" :popper-append-to-body="false" collapse-tags clearable multiple filterable placeholder="请选择地区">
            <el-option v-for="item of adminUserAreas" :key="item.areaId" :label="item.regionName" :value="item.areaId"></el-option>
          </el-select>
          </el-form-item>
        </div>
        <!--<div @click = searchdb >quanguo</div>-->
        <div v-if="!isHome" class="select-item">
          <el-select
            @change="search"
            style="width: 100%"
            filterable
            clearable
            :popper-append-to-body="false"
            v-model="form.examClasses"
            placeholder="请选择考试类型"
            multiple collapse-tags>
            <el-option v-for="item in examClasses" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </div>
        <div v-if="!isHome" class="select-item">
          <el-input v-model="form.classname" placeholder="搜索班级名称">
            <i @click="search" slot="suffix" class="el-input__icon el-icon-search"></i>
          </el-input>
        </div>
        <div class="select-item dateDIV">
          <el-date-picker
            @clear="search"
            @change="dateChange"
            v-model="form.date"
            type="daterange"
            value-format="timestamp"
            range-separator="至" style="width: 100%" start-placeholder="最早开课日期" end-placeholder="最晚开课日期">
          </el-date-picker>
        </div>
        <div v-if="isHome" class="select-item radioDIV hidemove">
          <el-radio-group @change="radioChange" v-model="form.radio">
            <el-radio-button label="7">近一周</el-radio-button>
            <el-radio-button label="30">近一个月</el-radio-button>
            <el-radio-button label="90">近三个月</el-radio-button>
          </el-radio-group>
        </div>
      </div>
    </el-form>
  </div>
  
  resetForm () {
  this.$nextTick(() => {
    this.$refs['dataForm'].resetFields()
  })
  this.search()
  this.$router.push({name: 'echart '})
}

你期待的结果是什么？实际看到的错误信息又是什么？

期待form被清空 或者form.area清空

Answer 1

你最好再仔细看一下elementui，官方文档，resetFields清理的是你在el-form-item上绑定的prop属性字段，如果有rules验证，resetFields清理的也是prop绑定的字段

Answer 2

如果可以的话可以用jsfiddle给个可以执行的代码，element官方表单重置的方法是resetFields
实在在不行就先定义一个默认的表单的数据

const defaultFormData = {
    selectarea: '',
    date: ''
    //你的其他初始数据
}

然后data中form: Object.assign({}, {}, defaultFormData )
重置的时候
this.form = Object.assign({}, {}, defaultFormData )，使表单信息重新恢复默认的空值，
顺便this.$refs.dataForm.clearValidate()移除所有的校验结果

Answer 3

1. 使用 this.$refs 而不是 this.$ref
2. 配合使用 this.$nextTick(() => {})
3. el-form 中的 model / ref 以及 el-form-item 中的 prop 再检查一遍吧