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>

这样，当单元格内容过长时，鼠标悬停在单元格上会显示完整的内容，而不会自动换行。

根据你的需求选择合适的方法。如果你需要完全禁止单元格内容的自动换行并显示省略号，使用第一种或第二种方法。如果你只需要在内容溢出时显示工具提示，那么第三种方法更适合。