如何更改antd表格选中行背景颜色

Question

我在我的 React 应用程序中使用带有复选框的 antd 表

我想更改所选表格的背景

const columns = [
    {
        title: 'Name',
        dataIndex: 'name',
    },
    {
        title: 'Age',
        dataIndex: 'age',
    },
    {
        title: 'Address',
        dataIndex: 'address',
    },
];
const data = [];
for (let i = 0; i < 46; i++) {
    data.push({
        key: i,
        name: `Edward King ${i}`,
        age: 32,
        address: `London, Park Lane no. ${i}`,
    });
}

我使用 rowClassName 来更改选择时的背景颜色，但它不起作用

const TestTable = () => {
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    const [loading, setLoading] = useState(false);
    const start = () => {
        setLoading(true);
        // ajax request after empty completing
        setTimeout(() => {
            setSelectedRowKeys([]);
            setLoading(false);
        }, 1000);
    };
    const onSelectChange = (newSelectedRowKeys) => {
        console.log('selectedRowKeys changed: ', newSelectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
    };
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };


    const rowClassName = (record) => {
        console.log("key is ", record)
        return record.key === selectedRowKey ? 'selected-row' : '';
    };


    const hasSelected = selectedRowKeys.length > 0;
    return (
        <div>
            <div
                style={{
                    marginBottom: 16,
                }}
            >
                <Button type="primary" onClick={start} loading={loading}>
                    Reload
                </Button>
                <span
                    style={{
                        marginLeft: 8,
                    }}
                >
                    {hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}
                </span>
            </div>
            <Table rowClassName="now" className='time-table-row-select' rowSelection={rowSelection} columns={columns} dataSource={data} />
        </div>
    )
}

export default TestTable

CSS

.selected-row {
  background-color: red;
}

Answer 1

const TestTable = () => {
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    const [loading, setLoading] = useState(false);
    const start = () => {
        setLoading(true);
        // ajax request after empty completing
        setTimeout(() => {
            setSelectedRowKeys([]);
            setLoading(false);
        }, 1000);
    };
    const onSelectChange = (newSelectedRowKeys) => {
        console.log('selectedRowKeys changed: ', newSelectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
    };
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };


    const rowClassName = (record) => {
        console.log("key is ", record)
        return selectedRowKeys.some(key => key === record.key) ? 'selected-row' : '';
    };


    const hasSelected = selectedRowKeys.length > 0;
    return (
        <div>
            <div
                style={{
                    marginBottom: 16,
                }}
            >
                <Button type="primary" onClick={start} loading={loading}>
                    Reload
                </Button>
                <span
                    style={{
                        marginLeft: 8,
                    }}
                >
                    {hasSelected ? `Selected ${selectedRowKeys.length} items` : ''}
                </span>
            </div>
            <Table rowClassName={(record) => rowClassName(record)} className='time-table-row-select' rowSelection={rowSelection} columns={columns} dataSource={data} />
        </div>
    )
}

export default TestTable

你的代码应该是这样的。

我修复了这个功能：

const rowClassName = (record) => {
        console.log("key is ", record)
        return record.key === selectedRowKey ? 'selected-row' : '';
    };

成为：

const rowClassName = (record) => {
            console.log("key is ", record)
            return selectedRowKeys.some(key => key === record.key) ? 'selected-row' : '';
        };

因为

selectedRowKeys

是一个字符串数组，它不能等于基本字符串。