当表格中某单元格的文字内容过多时,table中的每行的行高不一致导致风格不统一,这时需要用到ElementUI中table自带的属性show-overflow-tooltip使其内容均在一行显示,超出部分隐藏,鼠标移上去显示提示框,效果如下:
在这里插入图片描述

<el-table-column
          prop="description"
          label="模板说明"
          width="400"
          :show-overflow-tooltip="true"
        />

再对其提示框在全局中(若多个页面中有表格不用重复设置)设置最大宽度,以防文字内容过多会超屏显示
方法:在src>assets>css中建一个tooltip.css文件即可,文件内容如下:

/* 全局样式表 */
/* elementui中table超出隐藏提示框宽度 */
.el-tooltip__popper {
    max-width: 800px;
  
  }
Logo

前往低代码交流专区

更多推荐