根除表格行高困扰，巧用el-table轻松搞定</#title>

2023-02-26 17:30:41

El-Table行高设置：优化表格的可读性和美观性

导读

表格行高是表格呈现的关键因素，影响着表格的可读性、美观性以及用户体验。本文将深入探讨 El-Table 中丰富的行高设置选项，从固定行高到动态行高，再到其他高级设置，为开发者提供全面的指南，帮助他们创建高效且引人入胜的表格。

一、固定行高：简单实用

最直接的行高设置方式是使用 row-height 属性，指定一个固定的高度值（单位为像素或 rem）。这种方法简单易用，适用于行高需求明确的场景。

示例代码：

<el-table :row-height="50"></el-table>

二、动态行高：灵活自如

为了满足更复杂的场景需求，El-Table 提供了动态行高设置。通过将 row-height 属性设置为一个函数，开发者可以根据每行数据的不同特性动态计算行高。

示例代码：

<el-table :row-height="row => row.height"></el-table>

三、单行省略号：优化显示

对于内容较长的单元格，单行省略号可以有效避免文字溢出表格，增强表格的整体美观性。通过在单元格中使用 el-tooltip 组件，当鼠标悬停在单元格上时，可以显示完整的单元格内容。

示例代码：

<el-table :row-height="50">
  <el-table-column prop="name" label="姓名" width="100">
    <template slot-scope="scope">
      <el-tooltip class="item" placement="top" effect="dark" :content="scope.row.name">
        <span>{{ scope.row.name }}</span>
      </el-tooltip>
    </template>
  </el-table-column>
</el-table>