前端el-select下拉数据太长显示...鼠标浮上去显示全部
在使用element的select下拉框时,有时候数据过长需要显示省略号,鼠标移入显示全部文字的功能。
·
项目场景:
在使用element的select下拉框时,有时候数据过长需要显示省略号,鼠标移入显示全部文字的功能
实现方法:
直接先上代码:
<el-select
v-model="exampleManageParams.productCode"
placeholder="请选择"
filterable
remote
reserve-keyword
clearable
@focus="onSearchProduct"
:remote-method="onSearchProduct"
:popper-append-to-body="false"
:loading="isSelectGetDataLoading"
class="product-style">
<el-option
v-for="item in hasProduct"
:key="item.productCode"
:label="item.productName"
:value="item.productCode"
:title="item.productName">
<span>{{ item.productName }}</span>
</el-option>
</el-select>
实现el-select下拉数据太长显示…的功能:
.product-style /deep/ .el-select-dropdown__item {
width: calc(100% - 10px);
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
解释:
在el-option
中加上:title="item.productName"
实现鼠标浮上去显示全部的功能。
更多推荐
已为社区贡献12条内容
所有评论(0)