Vue如何调整表格行高

### 设置 Element UI 表格的行高 在使用 Element UI 的 `<el-table>` 组件时，可以通过多种方式调整表格的行高。以下是几种常见的方法： #### 方法一：通过 CSS 调整 `line-height` 和 `height` 可以直接针对 `.el-table__row` 类名设置样式来控制行高的显示效果[^1]。 ```css /* 自定义行高 */ .el-table__body tr { line-height: 30px !important; } /* 如果需要更精确地控制单元格高度 */ .el-table td, .el-table th.is-leaf { padding: 5px 0; /* 修改默认的上下内边距 */ } ``` 上述代码片段展示了如何通过修改 `padding` 和 `line-height` 来影响整个表格的行高。 --- #### 方法二：利用自定义类名覆盖默认样式 如果希望仅对特定表格应用不同的行高，可以为该表格指定一个唯一的类名并单独设置其样式[^2]。 ```vue <template> <div class="custom-table"> <el-table :data="tableData" style="width: 100%"> <!-- 列配置 --> </el-table> </div> </template> <style scoped> .custom-table .el-table__body tr { line-height: 40px !important; } .custom-table .el-table td, .custom-table .el-table th.is-leaf { padding: 8px 0; } </style> ``` 此方法允许开发者更加灵活地管理多个表格组件的不同外观需求。 --- #### 方法三：借助插槽 (Slot) 定制内容布局 对于复杂的场景，比如多级表头或多列数据展示，可能还需要结合插槽功能来自由设计每一行的内容结构[^3]。 ```vue <template> <el-table :data="tableData" style="width: 100%"> <el-table-column label="日期" width="180"> <template slot-scope="scope"> <span>{{ scope.row.date }}</span> <!-- 可在此处进一步优化渲染逻辑 --> </template> </el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> </el-table> </template> ``` 通过这种方式不仅可以改变行高等基础属性，还能增强用户体验界面的表现力。 --- ### 总结 为了满足实际开发中的多样化需求，在 Element UI 中有三种主要途径可用来设定或更改表格行的高度：一是全局范围内的 CSS 样式调整；二是局部作用域下的专属定制化方案；三是运用 Vue 插槽机制完成高级别的个性化呈现。