项目场景:

在使用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

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐