【ant design of vue】form下select的placeholder不起作用

图中代码呈现的下拉框,无默认提示,即placeholder内容不显示

尝试了很多方法,总结一下几种情况:

1、组件内部大概把除了undefined的值 都当作有value 所以不显示placeholder了

把组件中, gunCharge的初始值设置为undefined,之前设置为‘ ’,出错。

(当select的value绑定一个state默认值时,如果默认值是''或null时,placeholder不生效
解决方案:默认值设为undefined,从别处粘来的,大概一个意思)

参考:https://www.jianshu.com/p/dcb2ca14ed01

2、

<textarea placeholder="请输入"></textarea>

</textarea>要紧跟>的后面 中间不能有空格,不能回车换行

(没遇到,但搜索时大多答案是这个,记录下,可能会用到)

参考:https://blog.youkuaiyun.com/yuanqi3131/article/details/82416246

 

### 修改 Ant Design of Vue Select 组件下拉菜单样式 为了自定义 Ant Design of Vue 中 `Select` 组件的下拉菜单样式,可以采用多种方法。一种常见的方式是在外部通过 CSS 或者 LESS 来覆盖默认样式。 对于全局样式的修改,可以直接在项目的公共样式文件中添加特定的选择器来改变 `.ant-select-dropdown` 及其子元素的相关样式[^2]: ```css /* 全局样式 */ .ant-select-item { background-color: #f0f8ff; } .ant-select-item-option-content { color: blue; } ``` 如果希望仅针对某个具体的 `<a-select>` 实例应用特殊样式,则可以通过设置 `dropdownClassName` 属性给定一个唯一的类名,并在此基础上编写对应的样式规则[^3]: ```html <a-select mode="multiple" v-model:value="formState.name4" class="custom-form-length" placeholder="请点击选择按钮" :open="false" dropdownClassName="custom-dropdown-style"> </a-select> ``` ```less .custom-dropdown-style{ /* 自定义下拉列表项背景颜色 */ .ant-select-item { background-color: pink !important; &:hover, &.ant-select-item-active { background-color: lightpink !important; } /* 调整字体大小和颜色 */ .ant-select-item-option-content { font-size: 16px; color: darkred; } } /* 隐藏滚动条 */ ::-webkit-scrollbar { display: none; } } ``` 需要注意的是,在使用 scoped 样式作用域时可能会遇到一些问题,因为这会阻止某些样式应用于组件内部结构之外的部分。因此建议要么移除 scoped 属性,要么利用深度选择符 `/deep/` 或者 `>>>` 来穿透作用范围限制(具体取决于所使用的预处理器),从而确保能够正确地影响到目标 DOM 结构内的元素。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值