show-overflow-tooltip 解决elementui el-table标签自动换行的问题

show-overflow-tooltip 是 Element UI 表格 (el-table) 组件的一个属性，它的作用是当单元格内容太多时，显示为省略号，并通过工具提示 (Tooltip) 展示全部内容。

关于 el-table 自动换行的问题，如果你想让单元格内的文本自动换行显示，可以通过设置 CSS 样式来实现。

解决方案：

1. 在 el-table 中使用 show-overflow-tooltip 属性。
2. 通过自定义 CSS 样式来使得单元格内的文本自动换行。

示例代码：

HTML:

<el-table
  :data="tableData"
  style="width: 100%"
  show-overflow-tooltip>
  <el-table-column
    prop="date"
    label="日期"
    width="150">
  </el-table-column>
  <el-table-column
    prop="name"
    label="姓名"
    width="150">
  </el-table-column>
  <el-table-column
    prop="address"
    label="地址"
    width="300">
  </el-table-column>
</el-table>

CSS:

.el-table .cell {
  white-space: normal;
  word-break: break-all;
}

JavaScript:

new Vue({
  el: '#app',
  data: {
    tableData: [{
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄 的 路 上海市普陀区金沙江路 1518 弄 的 路'
    }, {
      date: '2016-05-04',
      name: '李小虎',
      address: '上海市普陀区金沙江路 1517 弄 的 路'
    }, {
      date: '2016-05-01',
      name: '赵小虎',
      address: '上海市普陀区金沙江路 1519 弄 的 路'
    }, {
      date: '2016-05-03',
      name: '孙小虎',
      address: '上海市普陀区金沙江路 1516 弄 的 路'
    }]
  }
});

在这个示例中，通过为 el-table 的单元格 (cell) 添加 CSS 样式 white-space: normal; 和 word-break: break-all;，使得单元格内的文本可以自动换行显示。这样，即使单元格内容很长，也不会以省略号的形式显示，而是正常显示并自动换行，同时，当内容太多时，会通过 Tooltip 显示全部内容。