el-select选项框内容过长

利用popper-class实现选项框内容过长,截取显示功能:

html 复制代码
<el-select popper-class="popper-class" :popper-append-to-body="false" v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
        <el-tooltip
          placement="top"
          :disabled="item.label.length<17"
        >
            <div slot="content">
                <span>{{item.label}}</span>
            </div>
            <div class="iclass-text-ellipsis">{{ item.label }}</div>
        </el-tooltip>
    </el-option>
</el-select>

<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎'
        }],
        value: ''
      }
    }
  }
</script>

<style scoped>
.el-select {
  width: 300px;
}
.el-select ::v-deep .popper-class {
  width: 300px;
}
.iclass-text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

结果如下:

相关推荐
ByteCraze1 分钟前
前端性能与监控指标采集系统设计方案
前端
山楂树の7 分钟前
前端实时渲染性能优化 使用cocoRLE编码进行图像传输并着色绘制
前端·图像处理·实时互动
程序员祥云8 分钟前
云希谷技术面
前端
疯笔码良12 分钟前
Vue + Echarts 实现科技感数据大屏
vue.js·echarts
一 乐14 分钟前
心理健康管理|基于springboot + vue心理健康管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端
G***E31615 分钟前
重塑前端的力量:从界面承载到体验驱动的全链路能力进化
前端
HIT_Weston15 分钟前
60、【Ubuntu】【Gitlab】拉出内网 Web 服务:Gitlab 配置审视(四)
前端·ubuntu·gitlab
G***E31617 分钟前
前端技术的下一场深变:从工程化到智能化的全面升级
前端
前端小端长17 分钟前
深入理解Composition API与Vue3.0响应式原理
开发语言·javascript
计算机毕设VX:Fegn08959 小时前
计算机毕业设计|基于springboot + vue图书商城系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端·课程设计