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>

结果如下:

相关推荐
Dontla4 小时前
n8n飞书webhook配置(飞书机器人、飞书bot、feishu bot)Crypto节点、js timestamp代码、Crypto node
javascript·机器人·飞书
tager5 小时前
🔥3行代码搞定全局代理!告别插件依赖的极简方案
前端·fiddler·charles
gnip6 小时前
axios 拦截器实现用户无感刷新 access_token
前端
程序员码歌6 小时前
【零代码AI编程实战】AI灯塔导航-成果展示篇
前端·ai编程·cursor
gnip6 小时前
前端实现即时通讯,常用的技术
前端
烛阴7 小时前
告别 any!用联合类型打造更灵活、更安全的 TS 代码
前端·typescript
excel8 小时前
全面解析 JavaScript 类继承:方式、优缺点与应用场景
前端
用户21411832636028 小时前
dify案例分享-100% 识别率!发票、汇票、信用证全搞定的通用票据识别工作流
前端
Hello.Reader9 小时前
Elasticsearch JS 客户端子客户端(Child Client)实践指南
大数据·javascript·elasticsearch
拾光拾趣录9 小时前
基础 | HTML语义、CSS3新特性、浏览器存储、this、防抖节流、重绘回流、date排序、calc
前端·面试