1. 程式人生 > 實用技巧 >Ant Design Vue 通過v-decorator實現資料繫結

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