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>