使用antd遇到的问题

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时，才可生效。