在使用 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>?中單元格內容的自動換行。選擇最適合你需求的方法。