iview表单重置功能的实现

有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();
 
            }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容