Browse Source

style: fixed Table fixed column bg color

shijia.me 2 years ago
parent
commit
3c95dca39f

+ 2 - 2
packages/semi-foundation/table/table.scss

@@ -142,7 +142,7 @@ $module: #{$prefix}-table;
                     &-right {
                         z-index: $z-table_fixed_column;
                         position: sticky;
-                        background-color: $color-table-bg-default;
+                        // background-color: $color-table-bg-default;
 
                         &::before {
                             background-color: $color-table_th-bg-default;
@@ -299,7 +299,7 @@ $module: #{$prefix}-table;
                 &-right {
                     z-index: $z-table_fixed_column;
                     position: sticky;
-                    background-color: $color-table-bg-default;
+                    // background-color: $color-table-bg-default;
                 }
 
                 &-left-last {

+ 2 - 1
packages/semi-ui/table/_story/table.stories.jsx

@@ -99,7 +99,8 @@ export {
     Fixed1556,
     FixedColumnAlign,
     FixOnChange,
-    ColumnResize
+    ColumnResize,
+    FixedRowSelectionBg
 } from './v2';
 export { default as FixSelectAll325 } from './Demos/rowSelection';
 

+ 159 - 0
packages/semi-ui/table/_story/v2/FixedRowSelectionBg/index.tsx

@@ -0,0 +1,159 @@
+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}
+        />
+    );
+}

+ 1 - 0
packages/semi-ui/table/_story/v2/index.js

@@ -21,3 +21,4 @@ export { default as Fixed1556 } from './Fixed1556';
 export { default as FixedColumnAlign } from './FixedColumnAlign';
 export { default as FixOnChange } from './FixOnChange';
 export { default as ColumnResize } from './ColumnResize';
+export { default as FixedRowSelectionBg } from './FixedRowSelectionBg';