Ant Design Vue 表單元件未提及的方法

mazhenxiao發表於2019-01-19
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>
複製程式碼
  1. 表單校驗格式,validator 最後一個引數callback必須返回 如果返回內容為空則通過校驗，返回任何內容都不通過校驗
let config={
      title:{
        rules:[
            {  required: true, message: '請輸入標題', validator(r,v,cb){
                    if(!v||v.includes("請輸入")){cb(false)}else{cb();}
                } 
            },

        ]
    }
}
複製程式碼
  1. 表單預設值設定，校驗，清空，部分未提及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)

複製程式碼

相關文章