antd vue表单用了v-decorator提交表单,怎么编辑的时候回填比表单

发布于 2022-09-13 00:30:57 字数 1695 浏览 16 评论 0

之前用element,现在用antd,官方好像更推荐用v-decorator去提交校验表单,请问,数据回填应该怎么去设置呢

<template>
<a-form :form="form" @submit="handleSubmit">
      <a-form-item label="订单号" :label-col="formLayout.labelCol" :wrapper-col="formLayout.wrapperCol">
        <a-input
          v-decorator="[
            'orderId',
            {
              rules: [
                {
                  required: true,
                  message: '请输入单号!',
                },
              ],
            },
          ]"
          placeholder="请输入订单号"
          size="default"
        />
      </a-form-item>
      <a-form-item :wrapper-col="buttonItemLayout.wrapperCol">
        <a-button type="primary" html-type="submit"> 提交 </a-button>
      </a-form-item>
    </a-form>
    </template>
    <script>
export default {
  data () {
    return {
      formLayout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 8 }
      },
      buttonItemLayout: {
        wrapperCol: { span: 14, offset: 4 }
      },
      ruleConfig: {
        config: {
          rules: [{ type: 'object', required: true, message: 'Please select time!' }]
        },
        rangeConfig: {
          rules: [{ type: 'array', required: true, message: 'Please select time!' }]
        }
      }

    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this, { name: 'register' })
  },
  methods: {
    // 提交
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
        }
      })
    }
  }
}
</script>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

你对谁都笑 2022-09-20 00:30:57
this.form.getFieldDecorator('orderId', {
  initialValue: 'value值',
  preserve: false,
});

或者

this.form.setFieldsValue({
  'orderId': 'value值',
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文