ant design vue2 table 中数据status为1的整行背景变灰
时间: 2023-12-27 11:02:26 浏览: 138
您可以使用 `rowClassName` 属性来为特定的行设置类名,然后在样式中设置该类名的样式来改变整行的背景色。
以下是一个示例代码,假设表格数据的 `status` 属性为 `1` 时需要将整行置灰:
```html
<template>
<a-table :columns="columns" :data-source="dataSource" :row-class-name="getRowClassName">
</a-table>
</template>
<script>
export default {
data() {
return {
columns: [
{
title: 'Name',
dataIndex: 'name',
},
{
title: 'Age',
dataIndex: 'age',
},
{
title: 'Status',
dataIndex: 'status',
},
],
dataSource: [
{
key: '1',
name: 'John Brown',
age: 32,
status: '0',
},
{
key: '2',
name: 'Jim Green',
age: 42,
status: '1',
},
{
key: '3',
name: 'Joe Black',
age: 32,
status: '0',
},
],
};
},
methods: {
getRowClassName(record) {
return record.status === '1' ? 'gray-row' : '';
},
},
};
</script>
<style>
.gray-row {
background-color: #ccc;
}
</style>
```
在这个示例中,我们使用 `getRowClassName` 方法来为特定的行设置类名,如果该行的 `status` 属性为 `1`,则返回 `gray-row` 类名;否则返回空字符串。然后在样式中设置 `.gray-row` 类名的样式来改变整行的背景色。
阅读全文