如何在Ant Design表格中根据偶数数据索引设置列背景色

要实现这个需求很简单，Ant Design的Table组件自带了rowClassName属性，我们可以利用它根据行的索引动态添加类名，再通过CSS设置背景色。下面是具体的实现步骤，结合你的代码来修改：

步骤1：定义行类名生成函数 #

首先写一个函数，接收行记录和索引作为参数，判断索引是否为偶数（注意索引从0开始），返回对应的类名：

// 生成行的类名，偶数索引返回even-row类
const getRowClassName = (record, index) => {
  return index % 2 === 0 ? 'even-row' : '';
};

步骤2：在Table组件中使用rowClassName属性 #

把上面的函数传递给Table的rowClassName属性，这样每一行都会根据索引得到对应的类名：

<Table
  columns={columns}
  dataSource={dataSource}
  pagination={{ pageSize: 10 }}
  rowClassName={getRowClassName} {/* 新增这个属性 */}
/>

步骤3：添加CSS样式设置背景色 #

最后在你的样式文件（或者内联样式）中给even-row类设置背景色：

.even-row {
  background-color: #f8f9fa; /* 这里可以换成你想要的任何颜色 */
}

额外优化：修正你的数据更新逻辑 #

注意到你在useEffect里直接调用setDataSource(list)，但dispatch(getData(token))是异步操作，这时候list可能还没更新，导致dataSource是空的。建议你单独监听list的变化来更新dataSource：

const [dataSource, setDataSource] = useState([])
const { list } = useSelector((state) => state.userData)

useEffect(() => {
  dispatch(getData(token))
  dispatch(getDataofFormularyDrug(0))
}, [])

// 当list更新时，同步更新dataSource
useEffect(() => {
  setDataSource(list)
}, [list])

这样就能确保表格的数据是最新的，同时偶数行的背景色也能正确应用啦。

内容的提问来源于stack exchange，提问作者Sami ullah