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>

结果如下:

相关推荐
weixin199701080163 分钟前
搜好货商品详情页前端性能优化实战
java·前端·python
SuperEugene8 分钟前
NPM Script 实战:常用命令设计与封装|Vue 工程化篇
前端·javascript·vue.js·前端框架·npm
前端进阶之旅12 分钟前
React 18 并发特性实战指南:提升大型应用性能的关键技术
前端·react.js·前端框架
恋猫de小郭13 分钟前
Android 性能迎来提升:内核引入 AutoFDO 普惠所有 15-16 设备
android·前端·flutter
小霍同学17 分钟前
Vue 动态表单(Dynamic Form)
前端·vue.js
Dragon Wu22 分钟前
Taro 小程序开发注意事项(不定期记录更新)
前端·javascript·小程序·typescript·taro
wangfpp24 分钟前
多端统一你真的会了吗?
前端·javascript·架构
小霍同学24 分钟前
Vue 动态组件(Dynamic Components)
前端·vue.js
Chengbei1129 分钟前
AI 自动逆向 JS 加密!自动抓密钥、出报告,彻底解放双手,解决抓包数据包加密难题
开发语言·javascript·人工智能·安全·网络安全·网络攻击模型
代码煮茶32 分钟前
Vue3 组件封装实战 | 从 0 封装一个可复用的表格组件(附插槽 / Props 设计)
前端·vue.js