iView 表单重置

ゝ一纸荒年。 2022-08-30 11:45 226阅读 0赞

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

示例如下：  
![在这里插入图片描述][20210720114333389.png_pic_center]

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

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

[表单验证][Link 1]  
https://www.iviewui.com/components/form\#BDYZ

[20210720114333389.png_pic_center]: /images/20220829/59e011870c774d3d85f3e21dc65f6f6f.png
[Link 1]: https://www.iviewui.com/components/form#BDYZ