el-form label过长时显示省略号 鼠标悬浮使用el-tooltip展示完整内容_el-form-item label 自动省略与浮现

实现思路

根据el-form-item 插槽自定义表头，使用el-tooltip包裹，通过mouseenter事件计算label长度是否溢出来控制el-tooltip的显示隐藏

代码展示

  <el-form-item v-bind="customAttrs" class="ts-font-14 ts-form-item" :class="{'inline-full-width':inlineFullWidth}">
        <template slot="label">
            <el-tooltip :content="customAttrs.label" placement="top" :disabled="isShowTooltip">
                <span  @mouseenter="visibleTooltip">{{customAttrs.label}}</span>
            </el-tooltip>
        </template>
        <slot></slot>
    </el-form-item>
1
2
3
4
5
6
7
8

.ts-form-item .el-form-item__label{
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	/*display:inline;*/
}
1
2
3
4
5
6

js

visibleTooltip(e){
	this.isShowTooltip = e.target.offsetWidth + 18 - e.fromElement.clientWidth > 0 ? false : true;  //18为required *号引起的偏差。
}
1
2
3

注意：上述代码为Element UI 二次封装的组件 根据实际情况调整即可