vue3 el-table 行数据沾满格 取消自动换行
在 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>这样，当单元格内容过长时，鼠标悬停在单元格上会显示完整的内容，而不会自动换行。