技術標籤：ant design vuevueant design vue表單

ref,:model="",rules常見，說下ant design vue表單特有的：

<a-form-model ref="form" :model="form" :rules="rules" v-bind="layout" class="form">
       <a-form-model-item has-feedback label="角色名稱" prop="roleName">
             <a-input v-model="form.name" autocomplete="off" placeholder="請輸入名稱" />
       </a-form-model-item>
       <a-form-model-item label="備註：" prop="description">
              <a-textarea v-model="form.description" placeholder="請輸入備註資訊" :rows="4" />
       </a-form-model-item>
</a-form-model> 
 

1.使用a-form-model表單

官網提供了兩種表單，但這裡建議使用a-form-model表單，更貼近elementui的寫法，更簡單

2.v-bind="layout" 調整表單及其元件的位置

labelCol調整輸入框前面文字佔多少列

wrapperCol調整輸入框佔多少列

//宣告在data(){}中
layout:{
    labelCol: { span: 8 },
    wrapperCol: { span: 6 }
}

3.has-feedback

對校驗結果進行反饋，顯示效果如圖所示：