vue3 el-table 行数据沾满格自动换行

在使用 Vue 3 结合 Element Plus 的 <el-table> 组件时，如果你希望当表格中的行数据文本过长时能够自动换行，而不是溢出到其他单元格或简单地截断，你可以通过以下几种方式来实现：

方法 1：使用 CSS

最简单的方法是通过 CSS 来控制表格单元格的内容换行。你可以为 <el-table-column> 设置一个样式，使其内容可以换行。

<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 }">{{ row.name }}</template></el-table-column><el-table-column prop="address" label="地址"><!-- 使用自定义的类名来控制换行 --><template #default="{ row }">{{ row.address }}</template></el-table-column></el-table>
</template><style>
/* 为 el-table-column 设置样式，使内容可以换行 */
.el-table .el-table__cell {white-space: normal !important; /* 重要，覆盖默认的 nowrap */word-break: break-all; /* 在长单词或 URL 地址内部进行换行 */
}
</style>

方法 2：在 <el-table-column> 中使用 show-overflow-tooltip 属性（如果不需要自定义样式）

如果你不想自定义 CSS，但希望在某些列上启用溢出提示而不是换行，可以使用 show-overflow-tooltip 属性。这个属性会显示一个工具提示（tooltip），当内容溢出时，而不是直接换行。

<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" show-overflow-tooltip></el-table-column><el-table-column prop:address" label="地址" show-overflow-tooltip></el-table-column>
</el-table>

方法 3：结合使用 CSS 和 show-overflow-tooltip

你可以根据需要结合使用 CSS 和 show-overflow-tooltip。例如，在某些列上使用换行，在另一些列上使用溢出提示。

<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 }">{{ row.name }}</template></el-table-column><el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column>
</el-table>

然后在 CSS 中：

.el-table .el-table__cell {white-space: normal !important; /* 重要，覆盖默认的 nowrap */word-break: break-all; /* 在长单词或 URL 地址内部进行换行 */
}

通过以上任一方法，你都可以实现 <el-table> 中单元格内容的自动换行。选择最适合你需求的方法。