1. 讓form表單顯示在同一行的屬性不生效？

   完完整整地將官網地例子復制過來。

   <a-form
           layout="inline"
           :model="formState"
           @finish="handleFinish"
           @finishFailed="handleFinishFailed"
           >
       <a-form-item>
           <a-input v-model:value="formState.user" placeholder="Username">
               <template #prefix>
                   <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
               </template>
           </a-input>
       </a-form-item>
       <a-form-item>
           <a-input
                    v-model:value="formState.password"
                    type="password"
                    placeholder="Password"
                    >
               <template #prefix>
                   <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
               </template>
           </a-input>
       </a-form-item>
       <a-form-item>
           <a-button
                     type="primary"
                     html-type="submit"
                     :disabled="formState.user === '' || formState.password === ''"
                     >
               Log in
           </a-button>
       </a-form-item>
   </a-form>
   

   結果卻發現樣式不起作用，表單中的input沒有在同一行。如圖

   errorForm.png

剛開始以為是自己寫的樣式有沖突，于是檢查了一番。。。

devtools.png

form標簽里面嵌套了三個form標簽，仔細檢查了自己復制的代碼沒有問題，那就是引入的時候哪個環節出錯了。于是檢查引入組件的代碼。

errorCode.png

噢~是這里的問題，Vue.component(Form.Item.name, Form)，第二個參數應該改為Form.Item。

2021.04.12更新

2. 引入Select組件報錯

   復制官網的例子過來

   <a-select
       v-model:value="value"
       show-search
       placeholder="Select a person"
       option-filter-prop="children"
       style="width: 200px"
       :filter-option="filterOption"
       @focus="handleFocus"
       @blur="handleBlur"
       @change="handleChange"
     >
       <a-select-option value="jack">Jack</a-select-option>
       <a-select-option value="lucy">Lucy</a-select-option>
       <a-select-option value="tom">Tom</a-select-option>
     </a-select>
   

   按照正常的方式引入。

   Vue.component(Menu.SubMenu.name, Menu.SubMenu)
   Vue.component(Select.Option.name, Select.Option)
   

   報錯了

   select-err.png

應該將a-select-option標簽修改為Option標簽

 <Option value="jack">Jack</Option>

解決

3. select組件的"placeholder"屬性不生效
   解決：select組件通過v-model綁定值，初始化的時候如果指定值為空，則placeholder屬性不生效，只有初始化時讓相應的值等于undefined時，才可生效。