在 Vue.js 使用 Element UI 或 Element Plus 的?<el-table>?組件時，如果你希望其中的單元格內容不自動換行，可以通過設置 CSS 樣式來實現。這里有幾種方法可以做到這一點：

方法1：使用 CSS 樣式

你可以直接在?<el-table-column>?上使用?:show-overflow-tooltip="true"?屬性，這樣內容超出時會顯示一個工具提示，而不是自動換行。如果你想完全禁止換行，可以結合使用 CSS 的?white-space?和?overflow?屬性。

<el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column label="姓名" width="180"><template #default="scope"><div class="no-wrap">{{ scope.row.name }}</div></template></el-table-column>
</el-table>

<style>
.no-wrap {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}
</style>

方法2：使用內聯樣式

你也可以在模板中直接使用內聯樣式：

<el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column label="姓名" width="180"><template #default="scope"><div :style="{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }">{{ scope.row.name }}</div></template></el-table-column>
</el-table>

方法3：使用?show-overflow-tooltip?屬性

如果你只是想在內容溢出時顯示一個工具提示，而不是完全禁止換行，你可以使用?show-overflow-tooltip?屬性：

<el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column label="姓名" width="180" show-overflow-tooltip><template #default="scope">{{ scope.row.name }}</template></el-table-column>
</el-table>

這樣，當單元格內容過長時，鼠標懸停在單元格上會顯示完整的內容，而不會自動換行。

根據你的需求選擇合適的方法。如果你需要完全禁止單元格內容的自動換行并顯示省略號，使用第一種或第二種方法。如果你只需要在內容溢出時顯示工具提示，那么第三種方法更適合。