Element UI el-table 行高设置：两种方法详解

<p>在 element-ui 的 el-table 组件中，可以通过设置行高来改变表格中每一行的高度。</p>
<p>可以通过以下两种方式来设置行高：</p>
<ol>
<li>使用 <code>row-height</code> 属性：可以在 el-table 组件上使用 <code>row-height</code> 属性来设置行高。该属性接收一个数字或者一个返回数字的函数作为参数。例如：</li>
<pre><code class="html"><el-table :data="tableData" :row-height="30">
  <!-- 表格列定义 -->
</el-table></code></pre>
或者
<pre><code class="html"><el-table :data="tableData" :row-height="getRowHeight">
  <!-- 表格列定义 -->
</el-table>
<script>
export default {
  data() {
    return {
      tableData: [],
    };
  },
  methods: {
    getRowHeight(row) {
      // 返回特定行的高度
      if (row.type === 'header') {
        return 40;
      } else {
        return 30;
      }
    },
  },
};
</script></code></pre>
<li>使用 CSS 样式：可以通过自定义 CSS 样式来设置行高。可以给表格的 tr 元素设置高度样式。例如：</li>
<pre><code class="html"><el-table :data="tableData" class="custom-table">
  <!-- 表格列定义 -->
</el-table>
<style scoped>
.custom-table tbody tr {
  height: 30px;
}
</style></code></pre>
<p>以上两种方式都可以用来设置 el-table 的行高。</p>