项目场景:

在使用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"实现鼠标浮上去显示全部的功能。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐