el-select 选中值 过长时换行
时间: 2024-10-25 14:14:13 浏览: 18
el-select获取选中的label值.pdf
5星 · 资源好评率100%
`el-select` 是 Element UI 中的一个下拉选择组件,在处理较长选项列表时,默认不会自动换行显示完整的内容,特别是当选中的值过长时。不过,你可以通过自定义样式或者配置项来解决这个问题。
一种常见的做法是设置 `el-option` 的 `title` 属性,使其超出部分可以自动换行,比如:
```html
<el-select placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
title="{{ item.label }} (如果内容太长,这里会被换行显示)"
></el-option>
</el-select>
```
然后你可以配合 CSS 样式调整,比如:
```css
.el-select .el-input__inner {
white-space: normal; /* 允许文本换行 */
word-wrap: break-word; /* 当单词超出容器宽度时,允许折行 */
}
```
如果你需要在选中的状态时也换行,可以在 JavaScript 中监听 `select` 的 `change` 事件,动态改变选中项的 `title` 属性。
阅读全文