当前位置:   article > 正文

el-select选项框内容过长

el-select选项框内容过长

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

  1. <el-select popper-class="popper-class" :popper-append-to-body="false" v-model="value" placeholder="请选择">
  2. <el-option
  3. v-for="item in options"
  4. :key="item.value"
  5. :label="item.label"
  6. :value="item.value"
  7. >
  8. <el-tooltip
  9. placement="top"
  10. :disabled="item.label.length<17"
  11. >
  12. <div slot="content">
  13. <span>{{item.label}}</span>
  14. </div>
  15. <div class="iclass-text-ellipsis">{{ item.label }}</div>
  16. </el-tooltip>
  17. </el-option>
  18. </el-select>
  19. <script>
  20. export default {
  21. data() {
  22. return {
  23. options: [{
  24. value: '选项1',
  25. label: '黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕黄金糕'
  26. }, {
  27. value: '选项2',
  28. label: '双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶双皮奶'
  29. }, {
  30. value: '选项3',
  31. label: '蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎蚵仔煎'
  32. }],
  33. value: ''
  34. }
  35. }
  36. }
  37. </script>
  38. <style scoped>
  39. .el-select {
  40. width: 300px;
  41. }
  42. .el-select ::v-deep .popper-class {
  43. width: 300px;
  44. }
  45. .iclass-text-ellipsis {
  46. white-space: nowrap;
  47. overflow: hidden;
  48. text-overflow: ellipsis;
  49. }
  50. </style>

结果如下:

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/花生_TL007/article/detail/573508
推荐阅读
  

闽ICP备14008679号