Ant Design Vue 通过v-decorator实现数据绑定

        <a-form-item label="切换环境">
          <a-select
            v-decorator="[
              'env',
              { rules: [{ required: true, message: '该字段是必填字段' }] }
            ]"
            placeholder="请选择环境"
          >
            <a-select-option value="dev">dev</a-select-option>
            <a-select-option value="test">test</a-select-option>
            <a-select-option value="staging">staging</a-select-option>
          </a-select>
        </a-form-item>

env就是绑定的值

如何查看 from 中绑定的表单数据?

  data() {
    return {
      form: this.$form.createForm(this, { name: 'coordinated' })
    }
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields(async (err, values) => {
        const checkMailParams = { ...values }
        delete checkMailParams.env
        if (!err) {
          const { response } = await CheckMailBox(checkMailParams)
          if (response) {
            this.text = response
          } else {
            this.$message.error(`请求异常`, 2)
          }
        }
      })
    },

必须先对form进行注册 this.$form.createForm(this, { name: 'coordinated' })

this.form.validateFields 方法就可以获取表单里的值 此时 打印的 values 就是 当前form表单里的全部数据 了

如果提交表单,不用提交form表单里的全部数据,需要过滤某个值,可以使用

    const checkMailParams = { ...values }
    delete checkMailParams.env
posted @ 2020-12-30 17:33  ···起风了  阅读(5635)  评论(0编辑  收藏  举报