Ant Design Vue 表单组件未提及的方法

1. vue form 表单 a-form-item label="设置标签" labelCol="{span:'标签格子'}" wrapperCol="{span:'内容格子'}" html="灰色提示信息"
2. v-decorator="['radio', config.radio]" 所有元素都可以设置，只是会对表单组件会修改其值，config是统一在js中设置

 <a-form
            class='ant-advanced-search-form'
            @submit="onSubmit"
            layout="inline"
            :form="form">
            <a-Row>
                <a-Col :span="12">
                    <a-form-item label="栏目" >
                        <a-select showSearch placeholder="选择栏目"  style="width:150px" v-decorator="['cannel', config.cannel]">
                             <a-select-option v-for="item in SM_Edit.news.editCannelList" :key="item.id"  :value="item.id">
                            {{item.publishingDepartment}}a-select-option>
                        a-select>

                    a-form-item>
                a-Col>
                 <a-Col :span="12" >
                     <a-form-item label="发布时间" >
                        <a-date-picker  style="width:150px"  @change="onChangeDate" v-decorator="['timepicker', config.timepicker]" />

                    a-form-item>
                a-Col>
            a-Row>
     a-form>
复制代码

3. 表单校验格式,validator 最后一个参数callback必须返回 如果返回内容为空则通过校验，返回任何内容都不通过校验

let config={
      title:{
        rules:[
            {  required: true, message: '请输入标题', validator(r,v,cb){
                    if(!v||v.includes("请输入")){cb(false)}else{cb();}
                } 
            },

        ]
    }
}
复制代码

4. 表单默认值设置，校验，清空，部分未提及api

//设置
this.form.setFieldsValue({"config中的设置":""});
//校验所有提交，values如果为null则代表校验成功
this.form.validateFields((err, values) => {})
//清除默认值，在api中未提及，但是源码中有，并亲测有效
//一下代码在api中均未提及
this.form.resetFields(["config中的key值"])
//更新
this.form.clearField("清除单个key")
//单个校验
this.form.validateFieldsInternal("key","校验",callback)

复制代码