el-table背景色修改
时间: 2024-05-10 20:12:42 浏览: 10
El-Table 是一个基于 Element UI 的表格组件,可以方便地展示大量数据。它提供了一些自定义样式的 API,可以轻松地修改表格的背景色。
具体的做法是:在 el-table 标签上添加一个属性 :row-style ,值为一个函数,用来返回每一行的样式对象。样式对象里可以包含 background-color 属性,用来修改背景色。下面是示例代码:
```
<el-table :data="tableData" :row-style="tableRowStyle">
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
// 定义 tableRowStyle 函数
tableRowStyle({row, rowIndex}) {
if (rowIndex % 2 === 0) {
return {background: '#f5f5f5'};
} else {
return {background: '#fff'};
}
}
```
在上面的例子中,我们定义了一个名为 tableRowStyle 的函数,它接受一个参数对象,包含当前行的数据和行号。我们通过判断行号的奇偶性来决定返回不同的背景色。这里是一个简单的示例,你可以根据自己的需求来编写更加复杂的逻辑。