当前位置：首页 > news >正文

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

news 2025/10/18 7:56:54

业务场景

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

实现方法

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

.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样式实现

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

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

完整代码示例

<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 (<ElTooltipplacement="top"disabled={!tooltipStates[rowId]}content={content}><divref={(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>