vue重置表单项失效

vue重置表单项数据失效

表单中，利用this.$refs[formName].resetFields()方法，清空表单项数据，但不执行。

原因

el-form需要接收一个model，并且需要配合el-form-item一起使用，并且在el-form-item上绑定prop属性，resetField方法才能好使。

例子

下面是一个element-ui中的动态增减表单项。利用重置按钮执行重置表单数据方法，开始时候没有给表单中el-form-item每个元素中绑定prop属性，操作无效。之后给每个表单元素加上:prop="‘experiences.’ + index + ‘.属性名’"绑定每个表单项的属性，操作成功。

html代码

<el-form ref="dynamicValidateForm" :model="dynamicValidateForm" label-width="100px" class="demo-dynamic">
          <el-form-item
            v-for="(experience, index) in dynamicValidateForm.experiences"
            :key="experience.key"
            :label="'专家背景' + index"
            :rules="{
              required: true, message: '经历不能为空', trigger: 'blur'
            }"
          >
            <el-row>
              <el-col :span="12">
                <el-form-item label="开始时间" :prop="'experiences.' + index + '.date1'">
                  <el-date-picker v-model="experience.date1" type="date" placeholder="选择开始时间" style="width: 100%;" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="结束时间" :prop="'experiences.' + index + '.date2'">
                  <el-date-picker v-model="experience.date2"  placeholder="选择结束时间" style="width: 100%;" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="经历简述" :prop="'experiences.' + index + '.textarea'" style="margin-top:10px">
              <el-input v-model="experience.textarea" type="textarea" :rows="2" placeholder="请输入内容" style="width: 80%;" />
              <el-button style="margin-left:20px" @click.prevent="removeExperiences(experience)">
                删除
              </el-button>
            </el-form-item>
          </el-form-item>
          <el-form-item style="margin-left:30px">
            <el-button @click="addExperiences">
              新增背景
            </el-button>
            <el-button @click="resetForm('dynamicValidateForm')">
              重置
            </el-button>
          </el-form-item>
        </el-form>

js代码

<script>
export default {
  data() {
    return {
      dynamicValidateForm: {
        experiences: [
          {
            date1: '',
            date2: '',
            textarea: ''
          }
        ]
      }
    }
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    removeExperiences(item) {
      var index = this.dynamicValidateForm.experiences.indexOf(item)
      if (index !== -1) {
        this.dynamicValidateForm.experiences.splice(index, 1)
      }
    },
    addExperiences() {
      this.dynamicValidateForm.experiences.push({
        value: '',
        key: Date.now()
      })
    }
  }
}
</script>