Vue小知识9.表单重置

提交表格之后,当在打开页面之后,仍然有历史数据保留,本文提供两种方式进行表单清空重置
1.使用 resetFields()方法(推荐,代码简单)
<html>
<jc-form
  ref="taskAdderForm"  //ref是必要时,用来指定要重置的位置
  :model="taskData"
  label-width="100px">
     <jc-form-item
          label="目标库:"
          prop="databaseName">  //prop是必要的,通过prop制定要重置的内容
          <jc-input v-model="taskData.databaseName"/>
       </jc-form-item>
</jc-form>

<div slot="footer">
        <jc-button @click="cancel('taskAdderForm')">取 消</jc-button>
</div>

<JS>
 methods: {
    cancel(value) {
      this.$emit('cancel')
      this.$refs[value].resetFields()
    }
}

2.在初始时候保留原始值,在之后进行赋值
<JS>
created(){
  this.defaultTaskData = this.taskData  //保留初始值
 },
methods:{
   cancel() {
    this.taskData = this.defaultTaskData  //进行赋值,清空已有数据
  }
 }

猜你喜欢

转载自blog.csdn.net/baidu_33438652/article/details/80998503
今日推荐