vue element 多选下拉框内容过长显示‘...’ 鼠标悬浮显示全部_前端el-select下拉数据太长显示...鼠标浮上去显示全部-CSDN博客

本文链接：https://blog.csdn.net/m0_48317876/article/details/125260043

这篇博客介绍了如何使用CSS和Vue.js处理下拉选择框内容过长的情况，通过设置CSS样式实现内容省略并用'...'替代，同时展示了在鼠标悬浮时如何使用Tooltip组件显示完整内容的实现方式。示例代码详细解释了各个部分的作用，包括全局CSS样式、Vue组件的HTML结构以及响应式数据处理。

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

效果展示

在这里插入图片描述

1.在全局css上下拉选择框-多选-内容过长-用…代替

.el-tag.el-tag--info {
  background-color: #f4f4f5;
  border-color: #e9e9eb;
  color: #909399;
  max-width: calc(100% - 50px);
}
.el-tag.el-tag--info:nth-child(1) {
  width: calc(100% - 50px);
}
.el-tag.el-tag--info:nth-child(1) .el-select__tags-text {
  width: calc(100% - 20px);
  float: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

2.鼠标悬浮显示全部

此为html部分

 <el-tooltip
          class="item"
          :disabled="isTooltipDisabled"
          :content="selectTooltipArr.join('，')"
          placement="top-start"
        >
          <el-select
            value-key="id"
            v-model="queryForm.productAbility"
            multiple
            placeholder="请选择"
          >
            <el-option
              v-for="item in productOptions"
              :key="item.id"
              :label="item.name"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-tooltip>

此为js部分

<script>
export default {
  name: 'Workbench',
  data() {
    return {
      isTooltipDisabled: true,//判断是否展示tooltip提示
      selectTooltipArr: [],//tooltip所展示数据
      // select多选数据
      productOptions: [
       { id: '2', name: '测试数据测试数据测试数据测试数据测试数据测试数据' },
        { id: '3', name: '测试1' },
        { id: '21', name: '测试2测试2测试2' },
        { id: '222', name: '测试3测试3测试3测试3测试3' }
      ],
      // 绑定的数据
      queryForm: {
        productAbility: []
      }
    }
  },
  watch: {
    'queryForm.productAbility'(newVal) {
    //因为我这个地方select绑定的value为一个对象 所以要进行处理
      this.selectTooltipArr = []
      newVal.forEach((element) => {
        this.selectTooltipArr.push(element.name)
      })
      // 处理完成 数据格式为['测试数据测试数据测试数据测试数据测试数据测试数据','测试1']
      const that = this
      this.$nextTick(function () {
        if (!newVal.length) {
          return (that.isTooltipDisabled = true)
        }
        if (newVal.length > 1) {
          that.isTooltipDisabled = false
        } else {
          that.isTooltipDisabled = true
          // 获取元素
          const obj2 = document.querySelector('.el-select__tags-text')
          if (typeof obj2 !== 'undefined') {
            that.isTooltipDisabled = obj2.scrollWidth <= obj2.offsetWidth
          } else {
            that.isTooltipDisabled = true
          }
        }
      })
    }
  }
}
</script>