Element UI 表格中如何让 ID 列居中并提高所在行高度

要将 ID 显示居中并使所在行变高，可以使用 CSS 样式来实现。在 el-table-column 组件的模板中，添加一个自定义的 class，并设置其样式属性。

修改后的代码如下所示：

<el-table :data='tableData' border='true' style='width: 100%;' size='large'>
  <el-table-column prop='id' class='centered-cell'>
    <template #header>
      <span style='font-size: 30px; color: aqua;'>ID</span>
    </template>
    <template #default='{ row }'>
      <span style='font-size: 50px;'>{{ row.id }}</span>
    </template>
  </el-table-column>
  <el-table-column prop='name' label='类别名' />

  <el-table-column label='操作'>
    <template #default='{ row }'>
      <el-button type='info' @click='AddEditMenus(row.id)'>编辑</el-button>
      <el-button type='danger' @click='delet(row.id)'>删除</el-button>
    </template>
  </el-table-column>
</el-table>

然后，在样式中定义 .centered-cell 类，并设置居中和行高的属性：

.centered-cell {
  text-align: center;
}

.el-table__row {
  height: 100px; /* 设置行高 */
}

通过以上代码，ID 列中的文字将居中显示，并且每一行的高度都将变为 100px。根据需要，你可以根据实际情况调整行高的数值。