el-table row-style的用法
时间: 2023-08-01 07:15:08 浏览: 294
`el-table` 组件提供了 `row-style` 属性来设置表格行的样式,具体用法如下:
```html
<el-table :data="tableData" :row-style="rowStyle">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
<el-table-column prop="address" label="Address"></el-table-column>
</el-table>
```
其中,`row-style` 属性可以接收一个函数,该函数接收一个参数 `row`,表示当前行的数据对象,需要返回一个对象,该对象的属性会被合并到当前行的 `style` 属性中,从而设置当前行的样式。例如:
```javascript
methods: {
rowStyle({ row, rowIndex }) {
if (rowIndex % 2 === 0) {
return {
backgroundColor: '#f9f9f9'
}
}
}
}
```
在上面的示例中,如果当前行的索引是偶数,则设置当前行的背景颜色为 `#f9f9f9`。
除了 `rowIndex`,`row` 参数还包含了其它属性,比如 `column` 表示当前列的配置对象,`$index` 表示当前行在整个表格数据中的索引,`$rowKey` 表示当前行的 key 值等。你可以根据需求选择合适的属性来设置行的样式。
阅读全文