iView 表单重置

Posted 2021-08-19 左直拳

在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>

let levels = [
  '一级',
  '二级',
  '三级',
  '四级',
  '五级'
]
export default {
  data () {
    return {
      levels: levels,
      form1: {
        ybdate: '',
        yblevel: [] // 对应了CheckBoxGroup
      }
    }
  },
  methods: {
    reset (formName) {
      this.$refs[formName].resetFields()
    }
  }
}

原本一个很简单的功能，却大费周折，在网上寻寻觅觅，全部都只说了一点点，支离破碎，基本上没有什么帮助。幸亏iView官网有比较完整的例子，还可以运行：

表单验证
https://www.iviewui.com/components/form#BDYZ