el-form-item超出隐藏

时间: 2023-12-06 07:32:40 浏览: 168
根据您提供的引用内容,要实现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进行二次封装的组件,您可以根据实际情况进行相应的调整。
阅读全文

相关推荐