ant design vue 4 select选择器踩坑
1、a-select默认是input与dropdown宽度一致，如果希望在dropdown宽度放宽，那么需要单独指定样式。
给出的API里虽有className属性，但是这是进行修改Option的样式，我们审查元素可以看到，下拉框是在body中的，这就无法通过在Select外层直接包一层div就来保证不影响其他Select的下拉框样式。
解决：查看antd官方文档，提供了下拉菜单的 className 属性，我们可以给Select设置popupClassName='drop' 然后再修改相关的样式。
该api限制antd版本要在 4.23.0，如果低于该版本，应该替换为 dropdownClassName='drop'
CSS Code复制内容到剪贴板
- .ant-select-dropdown.drop {
- background-color: #000;
- }
2、select显示一般是由label显示，回显的时候也会显示label，value只用作传参，这种情况，希望回显也是value，需要用到optionLabelProp属性
XML/HTML Code复制内容到剪贴板
- <a-select v-model:value="formState1.country" optionLabelProp="value" popup-class-name="login-form-drop" style="width: 26%">
- <a-select-option v-for="(item, index) in phoneCountryOptions" :key="index" :value="item.value">{{ item.label }}</a-select-option>
- </a-select>
上一篇 vue3接入语言包
下一篇 vue xlsx 数据导出
