antd vue v-decorator的取值与赋值

最新推荐文章于 2023-11-23 16:59:32 发布

原创最新推荐文章于 2023-11-23 16:59:32 发布 · 984 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

文章介绍了AntDesign框架中v-decorator和getFieldDecorator用于表单验证和数据同步的功能。使用这些装饰器后，表单控件的值和变更事件将由Form组件接管，不再需要手动处理onChange，初始值应通过initialValue设定，动态改变表单值则使用setFieldsValue方法。同时，文章提供了清空表单数据的示例代码。

v-decorator 是 Ant Design 的控件验证属性。

经过 getFieldDecorator 或 v-decorator 包装的控件，表单控件会自动添加 value（或 valuePropName 指定的其他属性） onChange（或 trigger 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：

你不再需要也不应该用 onChange 来做同步，但还是可以继续监听 onChange 等事件。

你不能用控件的 value defaultValue 等属性来设置表单域的值，默认值可以用 getFieldDecorator 或 v-decorator 里的 initialValue。

你不应该用 v-model，可以使用 this.form.setFieldsValue 来动态改变表单值。

定义form：

<template>
  <div class="main">
    <a-form
      id="formLogin"
      class="user-layout-login"
      ref="formLogin"
      :form="form"
      @submit="handleSubmit"
    >
        <a-form-item>
            <a-input
              size="large"
              type="text"
              placeholder="账户: "
              v-decorator="[
                'username',
                {initialValue:'',rules: [{ required: true, message: '请输入帐户名或邮箱地址' }, { validator: handleUsernameOrEmail }], validateTrigger: 'change'}
              ]"
            >
              <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
            </a-input>
          </a-form-item>
    </a-form>
 </div>
</template>
 
<script>
...
export default {
  ...
  data () {
    return {
      ...
      form: this.$form.createForm(this),
    }
  },
  created () {
    
  },
  ...
}
</script>

v-decorator 取值：

this.form.validateFields((err, values) => {
  // 这里做逻辑处理
  console.log(values) // { username: '' }
})

v-decorator 赋值：

this.form.setFieldsValue({
  username: '设置值'
})

清空表单数据：

this.form.resetFields

原文链接：https://blog.youkuaiyun.com/liao513146936/article/details/122956643