eltable 表格数据多行显示，超过3行省略，鼠标移动上去显示tooltip, 根据字数多少判断是否显示tooltip。2、tooltip换行显示。

1、表格最多显示3行，多余省略号，鼠标移动上去显示tooltip,表格内字数超过100个字才会显示tooltip。

<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column prop="content" label="内容">
      <template slot-scope="{row}">
        <el-tooltip :content="row.content" placement="top" :disabled="!isOverflow(row.content)">
          <span class="multi-line-ellipsis">{{ row.content }}</span>
        </el-tooltip>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { content: '这是一段非常长的文字内容，用于演示 Element UI 表格中如何限制显示字数并在悬停时显示完整内容。' },
        { content: '短内容' },
        { content: '这是另一段超过三行的内容，用于测试截断和 Tooltip 显示是否正常工作。' }
      ]
    };
  },
  methods: {
    // 可选：判断是否需要显示 tooltip（简单判断）
    isOverflow(content) {
      // 这里只是一个简单判断，你可以根据 DOM 实际高度进行更精确的控制
      return content.length > 100; // 假设超过一定长度才触发
    }
  }
};
</script>

<style scoped>
.multi-line-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 控制最多显示几行 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  max-height: calc(1.5em * 3); /* 行高 × 行数（可选） */
}
</style>

2、tooltip 换行显示

 <el-table-column prop="content" label="内容">
      <template slot-scope="{row}">
        <el-tooltip  placement="top" :disabled="!isOverflow(row.content)">
           <!-- 这里用div 插槽替换tooltip的content  -->
          <div slot="content" v-html="wrapBr(row.content,30)"></div>
          <span class="multi-line-ellipsis">{{ row.content }}</span>
        </el-tooltip>
      </template>
    </el-table-column>




methods: {
 //适用于vue2和vue3
 //每隔30个字符添加一个<br/>标签，用户tooltip 换行显示
  wrapBr(text, step = 30) {
    if (!text) return '';
    const reg = new RegExp(`.{1,${step}}`, 'g');
    return text.match(reg).join('<br/>');
  }
}