- vue form 表單 a-form-item label="設置標籤" labelCol="{span:'標籤格子'}" wrapperCol="{span:'內容格子'}" html="灰色提示信息"
- 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>
複製代碼
- 表單校驗格式,validator 最後一個參數callback必須返回 若是返回內容爲空則經過校驗,返回任何內容都不經過校驗
let config={
title:{
rules:[
{ required: true, message: '請輸入標題', validator(r,v,cb){
if(!v||v.includes("請輸入")){cb(false)}else{cb();}
}
},
]
}
}
複製代碼
- 表單默認值設置,校驗,清空,部分未說起api
this.form.setFieldsValue({"config中的設置":""});
this.form.validateFields((err, values) => {})
this.form.resetFields(["config中的key值"])
this.form.clearField("清除單個key")
this.form.validateFieldsInternal("key","校驗",callback)
複製代碼