el-select option选项内容过长省略

言西早啊

已于 2023-09-14 15:36:54 修改

阅读量4.2k

点赞数 4

分类专栏： ui 文章标签： vue.js javascript elementui css

于 2023-03-01 16:42:32 首次发布

本文链接：https://blog.csdn.net/m0_63818409/article/details/129284189

版权

ui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

针对Select组件中选项内容过多，造成弹出框超出屏幕的问题，解决方案包括：1)使用`popper-class`限制弹出框最大宽度，并通过`popper-append-to-body=false`使其不插入到body中；2)绑定`title`属性，以悬浮显示完整内容。

摘要由CSDN通过智能技术生成

问题：option选项内容多，导致弹出框过长，甚至超出屏幕，如下：

解决：
1、通过添加Select 下拉框的类名popper-class="popper-class"，修改样式，限制弹出框长度，超出...；同时将弹出框插入至 body 元素样式才会生效：popper-append-to-body="false"
2、选项绑定title，悬浮显示全部。

效果如下：

完整代码


<template>
  <el-select v-model="value" 
  popper-class="popper-class" 
  :popper-append-to-body="false"
   placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
      :title="item.label">
    </el-option>
  </el-select>
</template>
<script>
export default{
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好好吃'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }
    }
  }
}
</script>
<style scoped>
.el-select{
  width:300px;
}
::v-deep .popper-class {
  max-width: 300px;
}
.iclass-text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>