elementui table row-style
时间: 2023-10-05 16:12:57 浏览: 87
ElementUI的表格(Table)组件提供了`row-style`属性来设置表格行的样式。该属性可以是一个返回样式对象的函数,也可以是一个静态样式对象。
以下是使用函数设置行样式的示例:
```html
<template>
<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>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'John', age: 20, address: 'New York' },
{ name: 'Mike', age: 25, address: 'London' },
{ name: 'Anna', age: 30, address: 'Paris' }
]
};
},
methods: {
rowStyle(row, index) {
if (index % 2 === 0) {
return { background: '#f2f2f2' };
}
}
}
};
</script>
```
在上面的示例中,`row-style`属性被绑定到一个名为`rowStyle`的函数,该函数接收当前行数据和行索引作为参数。在这个函数中,我们检查当前行的索引是否是偶数行,如果是,返回一个包含背景颜色的样式对象。这样,偶数行将被设置为灰色背景。
如果您要设置静态样式对象,可以这样做:
```html
<template>
<el-table :data="tableData">
<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>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'John', age: 20, address: 'New York' },
{ name: 'Mike', age: 25, address: 'London' },
{ name: 'Anna', age: 30, address: 'Paris' }
],
rowStyle: { background: '#f2f2f2' }
};
}
};
</script>
```
在上面的示例中,我们将`row-style`属性绑定到一个静态样式对象,该对象包含了要应用于每一行的样式。