@hw-component/table 1.2.6 → 1.2.8

package/src/pages/Table/index.tsx

@@ -1,5 +1,5 @@
-import { HTable, useHTable ,HTableConfig} from "@/components";
-import {Button, Card, Tooltip} from "antd";
+import { HTable, useHTable, HTableConfig } from "@/components";
+import { Button, Card, Tooltip } from "antd";
 import { HFormConfigProvider } from "@hw-component/form";
 import { SettingOutlined } from "@ant-design/icons";
 
@@ -35,17 +35,83 @@ const configData = [
     itemProps: {
       options: [{ label: "1", value: 1 }],
     },
+    valueType: "date",
   },
   {
     title: <div>座位fff</div>,
     titleStr: "座位",
     dataIndex: "name2",
     searchType: "select",
-    sorter: true,
     itemProps: {
       options: [{ label: "name2", value: 1 }],
     },
   },
+  {
+    title: <div>标签</div>,
+    dataIndex: "tag",
+    sorter: true,
+    valueType: "tags",
+    width: 200,
+    valueTypeProps: {
+      closable: true,
+      tooltip: true,
+      onClose: (key) => {
+        console.log(key);
+      },
+      maxLen: 2,
+    },
+  },
+  {
+    title: "可以复制",
+    dataIndex: "copy",
+    sorter: true,
+    valueType: "copy",
+    width: 200,
+    valueTypeProps: {
+      text: () => {
+        return "你大爷";
+      },
+    },
+  },
+  {
+    title: "link",
+    dataIndex: "link",
+    sorter: true,
+    valueType: "link",
+    width: 200,
+    valueTypeProps: {
+      href: () => {
+        return "https://ant-design.antgroup.com/docs/react/i18n-cn";
+      },
+    },
+  },
+  {
+    title: "text",
+    dataIndex: "text",
+    sorter: true,
+    valueType: "text",
+    width: 80,
+    valueTypeProps: {
+      type: "secondary",
+      ellipsis: {
+        tooltip: true,
+      },
+    },
+  },
+  {
+    title: "userInfo",
+    dataIndex: "userInfo",
+    sorter: true,
+    valueType: "userInfo",
+    width: 80,
+  },
+  {
+    title: "avatar",
+    dataIndex: "avatar",
+    sorter: true,
+    valueType: "avatar",
+    width: 80,
+  },
   {
     title: "操作",
     name: "aaa",
@@ -63,9 +129,7 @@ const Test = ({ name, selectedRowData }) => {
 export default () => {
   const hTable = useHTable();
   return (
-    <HFormConfigProvider
-
-    >
+    <HFormConfigProvider>
       <div>
         <div
           onClick={() => {
@@ -74,84 +138,100 @@ export default () => {
         >
           获取
         </div>
-        <HTableConfig>
+        <HTableConfig
+          valueTypeConfig={{
+            userInfo: () => {
+              return <div>userInfo</div>;
+            },
+          }}
+        >
           <HTable
-              configData={configData}
-              rowKey={(data,index)=>{
-                 return index;
-              }}
-              table={hTable}
-              onReset={() => {
-                hTable.form.setFieldsValue({
-                  name1: "ffff",
+            configData={configData}
+            rowKey={(data, index) => {
+              return index;
+            }}
+            table={hTable}
+            onReset={() => {
+              hTable.form.setFieldsValue({
+                name1: "ffff",
+              });
+            }}
+            hideLabel={false}
+            labelWidth={88}
+            action={{
+              test: (params) => {
+                console.log(params, "lllll");
+              },
+            }}
+            rowSelection={{
+              allPageCheck: false,
+            }}
+            affixProps={{
+              target: () => document.querySelector(".body"),
+            }}
+            scroll={{
+              x: 1000,
+            }}
+            columnsState={{
+              persistenceKey: "test",
+              persistenceType: "localStorage",
+            }}
+            formInitValues={{
+              name2: 1,
+            }}
+            headerTitle={
+              <Button
+                type={"primary"}
+                onClick={() => {
+                  console.log(hTable.table.getColSettingKeys());
+                }}
+              >
+                操作
+              </Button>
+            }
+            paginationActionRender={() => {
+              return <div>你大爷</div>;
+            }}
+            request={(params) => {
+              const { current = 1, size = "10" } = params;
+              const arrayData = [];
+              for (let i = 0; i < 100; i = i + 1) {
+                arrayData.push({
+                  id: i,
+                  name: "11",
+                  name1: "1721730221",
+                  tag: [
+                    { value: "1", label: "你好" },
+                    { value: "2", label: "你好1" },
+                    { value: "3", label: "你好2" },
+                  ],
+                  copy: "复制",
+                  link: "https://www.baidu.com/",
+                  text: "文本文本文本文本",
+                  avatar:"https://img-1304033052.cos.ap-chengdu.myqcloud.com/b75979ace44aed0928f4e359709f60e6"
                 });
-              }}
-              hideLabel={false}
-              labelWidth={88}
-              action={{
-                test: (params) => {
-                  console.log(params, "lllll");
-                },
-              }}
-              rowSelection={{
-                allPageCheck: false,
-              }}
-              affixProps={{
-                target: () => document.querySelector(".body"),
-              }}
-              scroll={{
-                x: 1000,
-              }}
-              columnsState={{
-                persistenceKey: "test",
-                persistenceType: "localStorage",
-              }}
-              formInitValues={{
-                name2: 1,
-              }}
-              headerTitle={
-                <Button
-                    type={"primary"}
-                    onClick={() => {
-                      console.log(hTable.table.getColSettingKeys());
-                    }}
-                >
-                  操作
-                </Button>
               }
-              paginationActionRender={() => {
-                return <div>你大爷</div>;
-              }}
-              request={(params) => {
-                const { current = 1, size = "10" } = params;
-                const arrayData = [];
-                for (let i = 0; i < 100; i = i + 1) {
-                  arrayData.push({
-                    id: i,
-                    name: "11",
+              return new Promise((resolve, reject) => {
+                setTimeout(() => {
+                  // reject(new Error("错误"));
+                  resolve({
+                    size: size,
+                    current: current.toString(10),
+                    total: "1000",
+                    records: arrayData,
                   });
-                }
-                return new Promise((resolve, reject) => {
-                  setTimeout(() => {
-                    // reject(new Error("错误"));
-                    resolve({
-                      size: size,
-                      current: current.toString(10),
-                      total: "1000",
-                      records: arrayData,
-                    });
-                  }, 2000);
-                });
-              }}
-              options={{
-                settingRender: () => {
-                  return (
-                      <Tooltip title="321312312312321">
-                        <SettingOutlined width={24} />
-                      </Tooltip>
-                  );
-                },
-              }}
+                }, 2000);
+              });
+            }}
+            options={{
+              settingRender: () => {
+                return (
+                  <Tooltip title="321312312312321">
+                    <SettingOutlined width={24} />
+                  </Tooltip>
+                );
+              },
+            }}
           />
         </HTableConfig>
       </div>