iView 表单重置- 前端开发

在Vue里面，想重置iView的表单，需要在FormItem中指定prop属性，FormItem包含的控件需要双向绑定表单Model对象，同时表单Model对象也要因应控件类型，作适当的声明与初始化。这几个条件，缺一不可。以往使用原始的js，只需将表单对象执行一下reset()方法就可以了，现在搞到这么复杂。

示例如下：
在这里插入图片描述

<Form ref="form1" :model="form1" inline :label-width="90">
  <Row>
    <Col span="6">
      <FormItem label="预报日期" prop="ybdate">
        <DatePicker
          type="daterange"
          v-model="form1.ybdate"
          :start-date="new Date()"
          placement="bottom-start"
          placeholder="请指定日期范围"
        ></DatePicker>
      </FormItem>
    </Col>
    <Col span="10" class="padding-left">
      <FormItem label="预警等级" prop="yblevel">
        <CheckboxGroup v-model="form1.yblevel">
            <Checkbox v-for="item in levels" :label="item" :value="item" :key="item"></Checkbox>
        </CheckboxGroup>
      </FormItem>
    </Col>
  </Row>

  <Row type="flex" justify="end">
    <Col span="16">
      <Button type="primary" @click="add">新增</Button>
    </Col>
    <Col span="8" class="right-align">
      <Button type="primary" @click="search">查询</Button>
      <Button @click="reset('form1')">重置</Button>
    </Col>
  </Row>
</Form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

let levels = [
  '一级',
  '二级',
  '三级',
  '四级',
  '五级'
]
export default {
  data () {
    return {
      levels: levels,
      form1: {
        ybdate: '',
        yblevel: [] // 对应了CheckBoxGroup
      }
    }
  },
  methods: {
    reset (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23