-
让
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
没有在同一行。如图
刚开始以为是自己写的样式有冲突,于是检查了一番。。。
form
标签里面嵌套了三个form
标签,仔细检查了自己复制的代码没有问题,那就是引入的时候哪个环节出错了。于是检查引入组件的代码。
噢~是这里的问题,Vue.component(Form.Item.name, Form)
,第二个参数应该改为Form.Item
。
2021.04.12更新
-
引入
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)
报错了
应该将a-select-option
标签修改为Option
标签
<Option value="jack">Jack</Option>
解决
- select组件的"placeholder"属性不生效
解决:select组件通过v-model
绑定值,初始化的时候如果指定值为空,则placeholder属性不生效,只有初始化时让相应的值等于undefined
时,才可生效。