el-table中控制单列内容多行超出省略及tooltip

业务场景

el-table列中某列要求两行超出才超出省略并悬浮展示
对悬浮展示的内容要求到达一定字数时截断并添加...

实现方法

如果只需要实现两行才省略无需自定义tooltip，直接覆盖原有认样式

javascript 复制代码

.el-table .cell.el-tooltip {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	line-clamp: 2;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal !important;
}

但既需要对表格中的内容进行控制，又需要对悬浮层的内容控制只能在插槽中利用自定义tooltip实现。

如以下：在表格列实现两行超出显示省略号，并在悬浮时展示2000字符截断Tooltip，主要依赖计算动态控制Tooltip的显隐

状态与方法初始化

在Vue组件的<script setup>中定义响应式状态和核心方法：

tooltipStates存储每行Tooltip的禁用状态
descriptionRefs保存每行DOM元素的引用
truncateText函数限制Tooltip内容在2000字符内
setDescriptionRef函数管理DOM引用
checkTextOverflow函数通过DOM测量判断文本溢出

表格列配置

在ElTable列的render函数中定制单元格内容：

禁用默认Tooltip（showOverflowTooltip: false）
使用ElTooltip包裹内容，动态绑定disabled属性
应用多行截断CSS样式（-webkit-line-clamp: 2）
绑定ref回调和鼠标移入事件

CSS样式实现

内联应用多行文本截断样式：

css 复制代码

display: -webkit-box;
-webkit-line-clamp: 2;//以两行为例
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

完整代码示例

html 复制代码

<script setup>
import { reactive } from 'vue';
import { ElTooltip } from 'element-plus';

const tooltipStates = reactive({});
const descriptionRefs = reactive({});

const truncateText = (text, limit) => {
    if (!text) return '';
    const str = String(text);
    return str.length <= limit ? str : str.substring(0, limit) + '...';
};

const setDescriptionRef = (el, id) => {
    el ? descriptionRefs[id] = el : delete descriptionRefs[id];
};

const checkTextOverflow = (id) => {
    const element = descriptionRefs[id];
    if (!element) return;
    tooltipStates[id] = element.scrollHeight > element.clientHeight;
};

const tableColumns = [{
    label: '内容',
    showOverflowTooltip: false,
    render: (scope) => {
        const rowId = scope.row.id;
        const originalText = scope.row.content || '';
        const content = truncateText(originalText, 2000);
        
        return (
            <ElTooltip
                placement="top"
                disabled={!tooltipStates[rowId]}
                content={content}
            >
             <div
                ref={(el) => setDescriptionRef(el, rowId)}
                onMouseenter={() => checkTextOverflow(rowId)}
                style={{
                  whiteSpace: 'normal',
                  wordBreak: 'break-all',
                  display: '-webkit-box',
                  WebkitLineClamp: 2,
                  WebkitBoxOrient: 'vertical',
                  overflow: 'hidden',
                  textOverflow: 'ellipsis',
                  width: '100%'
                }}>
            </ElTooltip>
        );
    }
}];
</script>

注意事项

确保每行数据有唯一标识（如id），用于状态管理
大量数据时需注意内存泄漏问题，及时清理无用引用