elementui怎么给table tr增加一个类似row-key的参数
时间: 2024-02-11 16:07:11 浏览: 64
在 Element UI 的 Table 组件中,可以使用 `row-class-name` 属性来为每一行添加类名。这个属性的值可以是一个字符串或者一个函数,如果是字符串,则会为每一行添加相同的类名,如果是函数,则可以根据每一行的数据来动态生成类名。
以下是一个示例代码:
```html
<template>
<el-table :data="tableData" row-class-name="table-row">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
<el-table-column prop="gender" label="Gender"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'John', age: 25, gender: 'Male' },
{ name: 'Mary', age: 30, gender: 'Female' },
{ name: 'Bob', age: 20, gender: 'Male' }
]
}
}
}
</script>
<style>
.table-row {
background-color: #f5f5f5;
}
</style>
```
在上面的示例中,我们为 Table 组件添加了 `row-class-name` 属性,并将其值设置为 `table-row`。这样,每一行都会自动添加一个 `table-row` 类名,并且我们可以根据这个类名来设置每一行的样式。
阅读全文