修改el-table 样式
时间: 2023-10-03 15:04:10 浏览: 88
vue修改Element的el-table样式的4种方法
要修改 `el-table` 的样式,可以使用以下方法:
1. 使用 `class` 属性自定义样式,如:
```html
<el-table :data="tableData" class="my-table">
<!-- 表格内容 -->
</el-table>
```
```css
/* 自定义样式 */
.my-table {
/* 修改表格边框 */
border: 1px solid #ccc;
/* 修改表格背景色 */
background-color: #f7f7f7;
/* 修改表头样式 */
.el-table__header {
background-color: #333;
color: #fff;
}
/* 修改表格行样式 */
.el-table__row {
background-color: #fff;
&:nth-child(even) {
background-color: #f7f7f7;
}
}
}
```
2. 使用 `style` 属性直接修改样式,如:
```html
<el-table :data="tableData" style="border: 1px solid #ccc; background-color: #f7f7f7;">
<!-- 表格内容 -->
</el-table>
```
注意:以上方法中的样式只是示例,具体样式需要根据实际需求进行调整。
阅读全文