Nodejs学习笔记

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();
 
            }
上一篇下一篇

猜你喜欢

热点阅读