[Element UI] tabs 标题过长溢出省略并悬浮显示全部内容

思路: 用样式实现溢出省略, 用 el-tooltip 组件达到悬浮时显示的效果。

1. 修改 tabs 组件的样式

  .el-tabs__item {
    position: relative;
    display: inline-block;
    max-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 10px;

    .el-tooltip {
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .el-icon-close {
      position: absolute !important;
      top: 13px !important;
      right: 3px !important;
    }
  }

  .el-tabs__nav {
    line-height: 10px; // 使tab容器高度等于内容高度
  }

2. 在 el-tab-pane 标签内写入 el-tooltip, 并增加 tabTipDisabled 变量 和 spanMouseenter 事件， tabTipDisabled 控制悬浮提示是否显示, spanMouseenter 事件判断内容是否溢出。

注:
el-tooltip 标签应加上 slot=“label” 属性, 使悬浮内容只有在鼠标悬停时显示;

            <el-tabs
              v-model="editableTabsValue"
              type="card"
              closable
              @tab-remove="removeTab"
              @tab-click="handleTabClick"
            >
              <el-tab-pane
                v-for="item in editableTabs"
                :key="item.id"
                :label="item.title"
                :name="item.id"
              >
               // 增加 el-tooltip 组件来实现悬浮
                <el-tooltip
                  slot="label"
                  effect="light"
                  :content="item.title"
                  placement="bottom-start"
                  :visible-arrow="false"
                  :disabled="tabTipDisabled"
                >
                  <div
                    ref="tooltip-content"
                    @mouseenter="spanMouseenter($event)"
                  >
                    {{ item.title }}
                  </div>
                </el-tooltip>
                <div class="reports-content-tab-des l-mt-10">
                  {{ item.detail }}
                </div>
              </el-tab-pane>
            </el-tabs>

    
    tabTipDisabled: true,

    // 悬浮标签回调
    spanMouseenter(e) {
      let clientWidth = e.target.clientWidth
      let scrollWidth = e.target.scrollWidth
      this.tabTipDisabled =
        clientWidth == scrollWidth || clientWidth == scrollWidth - 1
    },