element ui 怎么调整table的行高

element ui 怎么调整table的行高

在Element UI中，调整Table的行高可以通过CSS覆盖默认的样式来实现。你可以为Table添加一个自定义类名，然后在CSS中指定tr的height属性来调整行高。

以下是一个简单的例子：

1. 在你的Vue组件中，给<el-table>添加一个自定义的类名，比如custom-table-class：

   
   <template>
     <el-table
       :data="tableData"
       class="custom-table-class"
       style="width: 100%">
       <!-- 你的 <el-table-column> 定义在这里 -->
     </el-table>
   </template>

2. 在你的CSS文件中，指定.custom-table-class tr的height属性来调整行高：

   
   <style>
   .custom-table-class tr {
     height: 60px; /* 你想要的行高 */
   }
   </style>

   上面不起作用就用这一段：确保这段CSS被加载，行高就会按照你指定的值来显示。如果你使用了scoped样式，你可能需要使用深度选择器 >>> 或 /deep/ 来确保你的样式能够穿透组件边界。

   
   <style scoped>
   .custom-table-class /deep/ tr {
     height: 60px; /* 你想要的行高 */
   }
   </style>