semi-design/packages/semi-ui/table/_story/v2/FixedRowSelectionBg/index.tsx

import React from "react";
import { Table, Avatar } from "@douyinfe/semi-ui";
import { IconMore } from "@douyinfe/semi-icons";

export default function App() {
    const columns = [
        {
            title: "标题",
            dataIndex: "name",
            width: 400,
            render: (text, record, index) => {
                return (
                    <div>
                        <Avatar
                            size="small"
                            shape="square"
                            src={record.nameIconSrc}
                            style={{ marginRight: 12 }}
                        ></Avatar>
                        {text}
                    </div>
                );
            }
        },
        {
            title: "大小",
            dataIndex: "size"
        },
        {
            title: "所有者",
            dataIndex: "owner",
            render: (text, record, index) => {
                return (
                    <div>
                        <Avatar
                            size="small"
                            color={record.avatarBg}
                            style={{ marginRight: 4 }}
                        >
                            {typeof text === "string" && text.slice(0, 1)}
                        </Avatar>
                        {text}
                    </div>
                );
            }
        },
        {
            title: "更新日期",
            dataIndex: "updateTime"
        },
        {
            title: "",
            dataIndex: "operate",
            render: () => {
                return <IconMore />;
            }
        }
    ];
    const data = [
        {
            key: "1",
            name: "Semi Design 设计稿.fig",
            nameIconSrc:
        "https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png",
            size: "2M",
            owner: "姜鹏志",
            updateTime: "2020-02-02 05:13",
            avatarBg: "grey"
        },
        {
            key: "2",
            name: "Semi Design 分享演示文稿",
            nameIconSrc:
        "https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png",
            size: "2M",
            owner: "郝宣",
            updateTime: "2020-01-17 05:31",
            avatarBg: "red"
        },
        {
            key: "3",
            name: "设计文档",
            nameIconSrc:
        "https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png",
            size: "34KB",
            owner: "Zoey Edwards",
            updateTime: "2020-01-26 11:01",
            avatarBg: "light-blue"
        },
        {
            key: "4",
            name: "Semi D2C 设计稿.fig",
            nameIconSrc:
        "https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/figma-icon.png",
            size: "2M",
            owner: "姜鹏志",
            updateTime: "2020-02-02 05:13",
            avatarBg: "grey"
        },
        {
            key: "5",
            name: "Semi D2C 分享演示文稿",
            nameIconSrc:
        "https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png",
            size: "2M",
            owner: "郝宣",
            updateTime: "2020-01-17 05:31",
            avatarBg: "red"
        },
        {
            key: "6",
            name: "Semi D2C 设计文档",
            nameIconSrc:
        "https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png",
            size: "34KB",
            owner: "Zoey Edwards",
            updateTime: "2020-01-26 11:01",
            avatarBg: "light-blue"
        }
    ];

    const handleRow = (record, index) => {
    // 给偶数行设置斑马纹
        if (index % 2 === 0) {
            return {
                style: {
                    background: "red"
                }
            };
        } else {
            return {};
        }
    };

    const rowSelection = {
        fixed: true
    // onCell: (record, index) => {
    //   if (index % 2 === 0) {
    //     return {
    //       style: {
    //         background: "red"
    //       }
    //     };
    //   } else {
    //     return {};
    //   }
    // }
    };

    return (
        <Table
            rowSelection={rowSelection}
            columns={columns}
            dataSource={data}
            onRow={handleRow}
            pagination={false}
        />
    );
}