<template>
<el-table :data="tableData">
<el-table-column
prop="content"
label="内容"
show-overflow-tooltip
:show-tooltip-when-overflow="true"
>
<!-- 自定义单元格内容 -->
<template #default="{ row }">
<span class="custom-cell">{{ row.content }}</span>
</template>
</el-table-column>
</el-table>
</template>
<script setup>
import { ref } from 'vue';
const tableData = ref([
{ content: '这是一段很短的内容' },
{ content: '这是一段非常长的内容，需要超出最大宽度时自动换行显示，而不是单行显示省略号。当内容超过指定宽度时应该换行，未超过时则自适应宽度。' }
]);
</script>
<style scoped>
/* 自定义单元格样式 */
.custom-cell {
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 全局修改 tooltip 样式 */
:deep(.el-popper) {
max-width: 400px !important; /* 设置最大宽度 */
word-wrap: break-word !important; /* 允许单词内换行 */
word-break: break-all !important; /* 更严格的换行规则 */
white-space: normal !important; /* 覆盖默认的 nowrap */
text-align: left !important; /* 左对齐 */
}
</style>
