typescript antd column组件中变颜色

在 TypeScript 中，如果你想要在 Ant Design 的 Table 组件的 Column 中动态改变单元格的颜色，你可以使用 `Formatter` 或者直接操作单元格元素来实现。这里有两个常见的方式：

1. **使用 Formatter**：
Column 的 `formatter` 属性允许你自定义每个单元格的内容渲染，包括样式。例如：

   import { TableColumn } from 'antd';

   const colorFormatter = (record: any) => {
     // 根据 record 中的数据条件动态设置背景色
     if (record.status === 'active') {
       return <span style={{ background: '#c0eaff' }}>Active</span>;
     } else {
       return <span style={{ background: '#f5f5f5' }}>Inactive</span>;
     }
   };

   const columns = [
     { title: 'Status', dataIndex: 'status', formatter: colorFormatter },
     // 其他列...
   ];

2. **在 render 函数中操作 DOM**：
如果你想在单元格渲染后的阶段改变颜色，可以在表格组件的 `render` 函数里获取单元格元素并修改其 CSS。这需要更深入地理解 React 渲染过程。

   const MyTable = ({ dataSource }) => {
     const handleCellClick = (rowIndex: number, cell: HTMLElement) => {
       cell.style.backgroundColor = rowIndex % 2 === 0 ? '#c0eaff' : '#f5f5f5';
     };

     return (
       <Table
         rowSelection={...}
         columns={...}
         onCellClick={(index, record, cell) => handleCellClick(index, cell)}
       />
     );
   };