【Antd】Table的斑马线行背景色设置

hzxOnlineOk

已于 2022-11-17 17:24:22 修改

阅读量1.8k

点赞数

分类专栏： antd-design 文章标签： javascript 前端 react.js

于 2022-11-17 17:23:45 首次发布

本文链接：https://blog.csdn.net/hzxOnlineOk/article/details/127908104

版权

antd-design 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

在这里插入图片描述

:global {
  .odd {
    background-color: #fff;
  }
  .even {
    background-color: rgba(250, 250, 250, 1);
  }
}

import { Space, Table, Tag } from "antd";
import React, { useState } from "react";

interface IProps {
  columns: any[];
  data: any[];
}

const CustomTable: React.FC<any> = (props: IProps) => {
  const { columns, data } = props;

  return (
    <Table
      columns={columns}
      rowClassName={(record, i) => (i % 2 === 1 ? "even" : "odd")} // 重点是这个api
      dataSource={data}
      pagination={{ current: 1, total: 50, pageSize: 10 }}
    />
  );
};

export default CustomTable;