el-table 全局加斑马纹
时间: 2024-09-20 09:11:01 浏览: 41
el-table-infinite-scroll:El-Table无限滚动
5星 · 资源好评率100%
el-table 是 Element UI 中的一个表格组件,如果你想给整个表格添加全局的斑马纹样式,使其每一行有不同的背景颜色以便区分,你可以通过 CSS 样式或者在表格的列属性设置中完成。这里是一个基本的例子:
1. **CSS 配置**:
在项目的 CSS 文件或者某个样式的 scoped 区域内,你可以添加如下的规则:
```css
.el-table tr:nth-child(even) {
background-color: #f2f2f2; /* 白色底的斑马纹,可以替换为你想要的颜色 */
}
.el-table tr:nth-child(odd) {
background-color: white; /* 灰色底的斑马纹 */
}
```
2. **HTML 结构**:
在你的 HTML 代码中,el-table 的默认样式已经包含了这样的效果,不需要额外操作。
3. **Element UI 自带的 `stripe` 属性**:
如果你想利用 Element UI 提供的功能,可以在表格组件上加上 `striped` 属性,例如:
```html
<el-table :data="tableData" striped>
<!-- ... -->
</el-table>
```
这会自动让表格的偶数行有灰色背景,奇数行有白色背景。
阅读全文