element ui表格showOverflowTooltip文字过长优化方案

在Element UI中，可以使用表格的show-overflow-tooltip属性来实现当单元格内容过长时，会自动显示为tooltip的形式。这样可以避免文本溢出造成布局混乱。

如果你需要对这个功能进行优化，可以考虑以下几点：

1. 自定义tooltip的触发方式，可以从鼠标悬停改为鼠标悬停及长按。
2. 对tooltip的样式进行自定义，比如增加文本的大小、加粗等。

下面是一个使用Element UI表格的show-overflow-tooltip属性，并自定义tooltip样式的例子：

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路1518号上海市普陀区金沙江路1518号上海市普陀区金沙江路1518号'
      }, {
        date: '2016-05-04',
        name: '张小刚',
        address: '上海市普陀区金沙江路1517号'
      }, {
        date: '2016-05-01',
        name: '李小红',
        address: '上海市普陀区金沙江路1519号'
      }]
    }
  }
}
</script>
 
<style>
/* 自定义tooltip样式 */
.el-tooltip__popper {
  font-size: 14px;
  font-weight: bold;
  /* 其他样式 */
}
</style>

在这个例子中，我们为el-table-column设置了show-overflow-tooltip属性，当单元格内容过长时，会自动显示tooltip。同时，我们在全局样式中定义了.el-tooltip__popper的样式，这样就可以实现自定义tooltip的样式。