Ant Design Vue 通過v-decorator實現資料繫結
阿新 • • 發佈:2020-12-30
<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