iview-resetFields()重置

最近在使用iview编写form表单的时候，由于对官方组件没读太多，直接上手，就按照自己的方式实现按钮reset重置事件，今天发现有现成的事件，起始都是大同小异。

• 自己的方式
• 组件提供的方式

一.自己的方式

闲话不说直接上案例
1.表单数据

    <Form  :model="vehicle" :label-width="80" inline >
      <FormItem label="车牌号：">
        <Input placeholder="请输入车牌号" v-model="vehicle.name"></Input>
      </FormItem>
      <FormItem label="企业名称：" >
        <Input placeholder="请输入企业名称" v-model="vehicle.companyName"></Input>
      </FormItem>
      <FormItem label="号牌种类：" >
      <Select style="width:200px" v-model="vehicle.hpzl">
        <Option v-for="item in hpzlList" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
      </FormItem>
      <FormItem label="使用性质：">
        <Select style="width:200px" v-model="vehicle.syxz">
          <Option value="1">1车</Option>
          <Option value="2">2车</Option>
          <Option value="3">3车</Option>
        </Select>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="searchInfo">查询</Button>
        <Button @click="handleReset()" style="margin-left: 8px">重置</Button>
      </FormItem>
    </Form>

method方法代码：直接将表单数据通过v-model重置为空；可以实现

 methods: {
      handleReset () {
       this.vehicle = {
            name: '',
            companyName: '',
            hpzl: '',
            syxz: ''
        }
      }
    }

二.组件提供的方式

闲话不说直接上案例
1.表单数据格式

<Form ref="vehicle" :model="vehicle" :label-width="80" inline >
      <FormItem label="车牌号：" prop="name">
        <Input placeholder="请输入车牌号" v-model="vehicle.name"></Input>
      </FormItem>
      <FormItem label="企业名称：" prop="companyName">
        <Input placeholder="请输入企业名称" v-model="vehicle.companyName"></Input>
      </FormItem>
      <FormItem label="号牌种类：" prop="hpzl">
      <Select style="width:200px" v-model="vehicle.hpzl">
        <Option v-for="item in hpzlList" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
      </FormItem>
      <FormItem label="使用性质：" prop="syxz">
        <Select style="width:200px" v-model="vehicle.syxz">
          <Option value="1">1车</Option>
          <Option value="2">2车</Option>
          <Option value="3">3车</Option>
        </Select>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="searchInfo">查询</Button>
        <Button @click="handleReset('vehicle')" style="margin-left: 8px">重置</Button>
      </FormItem>
    </Form>

method方法实现

 methods: {
      handleReset (name) {
        this.$refs[name].resetFields()
      }
    }

使用官网组件的方式需要注意一下四点：

总结：
1.在Form标签中添加ref属性将model进行引用；
2.FormItem标签中添加prop属性指向v-model的真实引用字段名称；
3.重置按钮中添加方法将第一步中的ref的值作为参数传递；
4.$refs[name]的值就相当于model的使用；