elementplus标签页标题提示文字

在含标签页项目中,由于标题过长往往会设置溢出隐藏的效果,所以当鼠标停留在标题时需要有该标题完整信息的提示文字,才有好的体验,具体效果如下图.

对于提示文字elementplus也提供了Tooltip组件.
关键:使用标签页中提供的Tab-pane Slots(插槽)可很好的实现

,具体代码如下

	<el-tab-pane
      v-for="item in editableTabs"
      :key="item.name"
      lazy
    >
      <template #label>
        <el-tooltip :content="item.title" placement="bottom" effect="light">
          <span>{{
            item.title.length > 9
              ? item.title.substring(0, 9) + ".."
              : item.title
          }}</span>
        </el-tooltip>
      </template>
      <div>标签页内容</div>
    </el-tab-pane>