rowClassName doesn't work for columns with fixed attribute? #5215
Description
- I have searched the issues of this repository and believe that this is not a duplicate.
Version
3.0.0-beta.8
Environment
vue@3.2.25
Reproduction link
Steps to reproduce
<template>
<Table :columns="columns" :data-source="data" :row-class-name="rowClassName" :scroll="{ x: 1500, y: 300 }">
<template #bodyCell="{ column }">
<template v-if="column.key === 'operation'">
<a>action</a>
</template>
</template>
</Table>
</template>
<script lang="ts">
import type { TableColumnsType } from 'ant-design-vue';
import { defineComponent } from 'vue';
import { Table } from 'ant-design-vue';
const columns: TableColumnsType = [
{ title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' },
{ title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },
{ title: 'Column 1', dataIndex: 'address', key: '1', width: 150 },
{ title: 'Column 2', dataIndex: 'address', key: '2', width: 150 },
{ title: 'Column 3', dataIndex: 'address', key: '3', width: 150 },
{ title: 'Column 4', dataIndex: 'address', key: '4', width: 150 },
{ title: 'Column 5', dataIndex: 'address', key: '5', width: 150 },
{ title: 'Column 6', dataIndex: 'address', key: '6', width: 150 },
{ title: 'Column 7', dataIndex: 'address', key: '7', width: 150 },
{ title: 'Column 8', dataIndex: 'address', key: '8' },
{
title: 'Action',
key: 'operation',
fixed: 'right',
width: 100,
},
];
interface DataItem {
key: number;
name: string;
age: number;
address: string;
}
const data: DataItem[] = [];
for (let i = 0; i < 100; i ) {
data.push({
key: i,
name: `Edrward ${i}`,
age: 32,
address: `London Park no. ${i}`,
});
}
export default defineComponent({
components: { Table },
setup() {
function rowClassName() {
return 'table-hightlight';
}
return {
data,
columns,
rowClassName,
};
},
});
</script>
<style lang="less" scoped>
:deep(.table-hightlight) {
background: #ffefef !important;
}
</style>What is expected?
表格每一行背景色改变
What is actually happening?
fixed属性的columns并没有变色，这是设计如此还是有问题呢？