Ant Design Vue ＜a-table＞表格行根据条件改变背景色

在Ant Design Vue中，可以通过使用rowClassName属性来根据条件改变表格行的背景色。rowClassName接受一个函数，该函数会传入参数record（当前行的数据）和index（当前行的索引），并根据你的条件返回一个包含className的对象。

以下是一个简单的例子，演示如何根据行数据中某个字段的值来改变背景色：

<template>
  <a-table
    :columns="columns"
    :dataSource="data"
    :rowClassName="setRowClassName"
  >
  </a-table>
</template>
 
<script>
export default {
  data() {
    return {
      columns: [
        {
          title: 'Name',
          dataIndex: 'name',
        },
        {
          title: 'Age',
          dataIndex: 'age',
        },
        // ... 其他列定义
      ],
      data: [
        {
          key: '1',
          name: 'John Doe',
          age: 32,
          // ... 其他数据
        },
        // ... 其他数据行
      ],
    };
  },
  methods: {
    setRowClassName(record, index) {
      // 根据条件设置背景色
      if (record.age > 30) {
        return 'table-row-bg-color';
      } else {
        return '';
      }
    },
  },
};
</script>
 
<style>
.table-row-bg-color {
  background-color: #f5f5f5; /* 需要改变的背景色 */
}
</style>

在上面的例子中，setRowClassName方法检查了每行数据中的age字段，如果年龄大于30岁，则返回了一个包含table-row-bg-color的类名，这个类在<style>标签中定义了具体的背景色。如果不满足条件，则返回空字符串，表格行将保持默认的背景色。