VUE ElementUI中table框设置文字超出隐藏及设置提示框样式_vue+element :el-tooltip 文本超出时,文字提示,否则隐藏

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

<el-table-column
          prop="description"
          label="模板说明"
          width="400"
          :show-overflow-tooltip="true"
        />
1
2
3
4
5
6

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

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