el-form-item超出隐藏
时间: 2023-12-06 22:32:40 浏览: 151
解决layui表格内文本超出隐藏的问题
根据您提供的引用内容,要实现el-form-item超出隐藏,您可以使用el-tooltip组件来包裹label,并通过计算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>
```
在样式部分,您可以为.el-form-item__label设置一些属性来实现超出隐藏的效果:
```
.ts-form-item .el-form-item__label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
```
在js部分,您可以使用visibleTooltip方法来计算label的长度是否溢出,从而控制isShowTooltip的值:
```
visibleTooltip(e) {
this.isShowTooltip = e.target.offsetWidth - e.fromElement.clientWidth > 0 ? false : true;
// 18为required *号引起的偏差。
}
```
请注意,上述代码是基于Element UI进行二次封装的组件,您可以根据实际情况进行相应的调整。
阅读全文