使用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更新
- 引入
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>解决
- select组件的"placeholder"属性不生效 解决：select组件通过
v-model绑定值，初始化的时候如果指定值为空，则placeholder属性不生效，只有初始化时让相应的值等于undefined时，才可生效。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
作者已关闭评论
推荐阅读
腾讯云开发者
