(Ant Design of Vue) Form表单动态设置默认值避开setValuesField)

(Ant Design of Vue) Form表单动态设置默认值避开setValuesField

分离form数据和 表单默认数据

由于使用setValuesField加载数据导致一系列的错误,因此作者不通过修改form的值来到达设置默认值的目的,使用到两个变量

  infoForm: {},
  infoDrawer: false,

绑定submit数据

form标签中引入

:form="form" 

设置默认值

v-decorator="[
'status', 
{
  valuePropName: 'checked',// 因为是在switch中必须添加才能使用
  initialValue: (infoForm.status == 1)?true:false 
}]" 
checked-children="正常" 
un-checked-children="禁用" 

触发事件

onEdit(obj) {
  this.infoForm = obj //obj为表格中的行数据
  this.infoDrawer = true //弹出抽屉
},

表单提交

触发事件

@click="onSubmit"
    onSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log(values);
          // 验证表单后返回数据 values
        }
      })
    },

猜你喜欢

转载自blog.csdn.net/qq_41784169/article/details/113367257
今日推荐