iview表单重置功能的实现
2017-06-07 本文已影响174人
2远
有n个model是否需要把每个model都置空?有没有什么简单的方法,答案是有的。
首先在data中设置一个结构体,比如
form: {
sn: '',
employeeName: '',
accountWxId: '',
status: '',
deliveryName: '',
deliveryMobile: ''
},
然后让表单绑定这个结构体,
<Form :label-width="100" ref="form" :model="form" >
......
</Form>
每个表单的item,除了设置model外,还有设置一个prop属性,指向form中的属性,比如
<Form-item label="订单编号" prop="sn">
<Input v-model="form.sn" placeholder="请输入"></Input>
</Form-item>
在重置按钮的点击事件中传入这个结构体
<Button type="info" @click="resetQueryCondition('form')">重置</Button>
在重置方法中直接调用,this.$refs[name].resetFields();即可把所有的表单项都置空
resetQueryCondition: function (name) {
//重置
this.$refs[name].resetFields();
}