elementui table 表格颜色
时间: 2023-09-21 14:03:20 浏览: 45
Element UI 的表格组件提供了多种样式和颜色主题,可以通过设置表格的属性来更改表格的颜色。
以下是一些常见的表格颜色设置方法:
1. 设置表格的 stripe 属性为 true,可以为表格的行添加斑马线样式,即相邻两行的背景色不同:
```
<el-table :data="tableData" stripe>
<!-- 表格列定义 -->
</el-table>
```
2. 设置表格的 highlight-current-row 属性为 true,可以为当前选中的行添加高亮样式:
```
<el-table :data="tableData" highlight-current-row>
<!-- 表格列定义 -->
</el-table>
```
3. 通过设置表格列的 slot-scope 属性来自定义行的样式,可以根据行数据的不同来设置不同的颜色:
```
<el-table :data="tableData">
<el-table-column label="名称" prop="name">
<template slot-scope="scope">
<div :class="{'text-danger': scope.row.status === 'error', 'text-success': scope.row.status === 'success'}">{{scope.row.name}}</div>
</template>
</el-table-column>
<!-- 其他表格列定义 -->
</el-table>
```
在上面的例子中,根据行数据的 status 属性来设置名称列的文本颜色,如果 status 为 error,文本颜色为红色,如果为 success,文本颜色为绿色。
除此之外,Element UI 还提供了多种颜色主题,可以通过设置组件的 theme 属性来切换主题,具体可以参考 Element UI 的官方文档。