【Vue】使用elementPlus的table时,实现自定义tooltip效果，单行显示，超出则显示省略号，鼠标移入后，当文字数量大于20则换行自定义展示的tooltip

在使用Element Plus的Table组件时，可以通过自定义列模板来实现单行文本超出显示省略的Tooltip效果。以下是一个简单的示例代码：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
      <template #default="{ row }">
        <el-tooltip :content="row.name" placement="top" effect="dark">
          <div class="ellipsis" :style="{ maxWidth: '100px' }">{{ row.name }}</div>
        </el-tooltip>
      </template>
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: '王小虎1234567890' },
        // 其他数据...
      ],
    };
  },
};
</script>
 
<style>
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>

在这个示例中，我们定义了一个带有tooltip的列模板，.ellipsis 类用于确保当文本超出指定宽度时显示省略符号。el-tooltip 组件的 content 属性绑定了单元格的实际内容，并且 placement 和 effect 属性分别设置了提示框的位置和样式。