Element-UI

异常现象

表格列宽超限，GitHub已有针对该异常的讨论，详见：https://github.com/ElemeFE/element/issues/10308 (opens new window)
具体异常现象可参看下图：

追溯原因

经查验，当width与show-overflow-tooltip同时存在时，el-tooltip未正确设置width行内样式，主流浏览器均存在该情况，而Safari不兼容col列设置的宽度，内容过长时，会导致撑开列宽；

解决办法

两种解决办法：

一、源码（建议官方修复）

文件修改所在：packages/table/src/table-body.js (opens new window)

  getColspanRealWidth(columns, colspan, index) {
    if (colspan < 1) {
      return columns[index].realWidth;
    }
    const widthArr = columns.map(({ realWidth }) => realWidth).slice(index, index + colspan);

    // (修改前)存在widthArr => null
    // return widthArr.reduce((acc, width) => acc + width, -1);

    // (修改后)过滤非法值 null
    const validArr = widthArr.filter(item => item)
    return validArr.length ? validArr.reduce((acc, width) => acc + width, -1) : null;
  },

二、利用官方提供cell-style设置单元格样式

WARNING

注意：此类方法针对数据渲染较大时，对性能有较高要求，不建议可取

  <el-table :cell-style="getCellStyle">
    ...
  </el-table>

  getCellStyle({ column }) {
    // TODO 针对Safari表格width与showOverflowTooltip暂不能共存异常
    const tempWidth = column.realWidth || column.width
    if (column.showOverflowTooltip) {
      return {
        minWidth: tempWidth + 'px',
        maxWidth: tempWidth + 'px'
      }
    }

    return {}
  }