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>

结果如下:

相关推荐
顺丰同城前端技术团队3 分钟前
DeepSeek 国产大模型新标杆
前端·后端·程序员
Java水解4 分钟前
微前端架构:从单体到模块化的前端新革命
前端
Mr_汪6 分钟前
uniapp使用h5的map(已弃用)
前端
前端进阶者9 分钟前
vite调试node_modules下面插件
前端·vite
YaHuiLiang17 分钟前
小微互联网公司与互联网创业公司 -- 学历之殇
前端·后端·面试
用户261245834016120 分钟前
vue学习路线(11.watch对比computed)
前端·vue.js
CAD老兵26 分钟前
前端 Source Map 原理与结构详解
前端
gnip30 分钟前
markdown预览自定义扩展实现
前端·javascript
大猫会长41 分钟前
mac中创建 .command 文件,执行node服务
前端·chrome
旧时光_41 分钟前
Zustand 状态管理库完全指南 - 进阶篇
前端·react.js