列表新增空行

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@fluentui/react-components": "^9.55.1",
+    "@fluentui/react-datepicker-compat": "^0.4.53",
     "@fluentui/react-icons": "^2.0.264",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",

src/pages/listnew/index.jsx

@@ -11,7 +11,8 @@ import {
   SelectAllOn16Regular,
   CommentAdd16Regular,
   MoreHorizontal16Filled,
-  NumberCircle116Regular
+  NumberCircle116Regular,
+  Add16Filled
 } from "@fluentui/react-icons";
 import {
   DataGridBody,
@@ -30,11 +31,14 @@ import {
   MenuPopover,
   Tooltip,
   MenuDivider,
+  Input,
+  Select,
 } from "@fluentui/react-components";
+import { DatePicker } from "@fluentui/react-datepicker-compat";
 
 
-const List = () => {
-  const defaultSelectedItems = React.useMemo(() => new Set([1]), []);
+const List = (editType) => {
+  // const defaultSelectedItems = React.useMemo(() => new Set([1]), []);
 
   //数据类型常量
   const DATA_TYPE = {
@@ -196,7 +200,8 @@ const List = () => {
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
       >
-        {props.cellData}
+
+        {editType.edit == "true" ? <Input type="text" style={{ width: "calc(100% - 70px)" }} defaultValue={props.cellData} /> : props.cellData}
         {showButton && (
           <div>
             <Tooltip content="更多操作" positioning="below">
@@ -217,74 +222,92 @@ const List = () => {
     );
   };
 
+  const tableData = [
+    {
+      序号: { label: 1 },
+      姓名: { label: "陈丹" },
+      性别: { label: "女" },
+      年龄: { label: "18岁" },
+      最后在线时间: { label: "2024-11-03" },
+    },
+    {
+      序号: { label: 2 },
+      姓名: { label: "蔡青松" },
+      性别: { label: "男", },
+      年龄: { label: "30岁" },
+      最后在线时间: { label: "2024-11-04" },
+    },
+    {
+      序号: { label: 3 },
+      姓名: { label: "杨东明" },
+      性别: { label: "男" },
+      年龄: { label: "25岁" },
+      最后在线时间: { label: "2024-11-05" },
+    },
+    {
+      序号: { label: 4 },
+      姓名: { label: "吴瑞强" },
+      性别: { label: "男" },
+      年龄: { label: "25岁" },
+      最后在线时间: { label: "2024-11-06" },
+    },
+  ]
+
+  const [newTableData, setTabeData] = useState(tableData);
+
+  /**
+   * 新增空行
+   */
+  const AddNewRow = () => {
+    setTabeData(newTableData.concat([{
+      序号: { label: newTableData.length + 1 },
+      姓名: { label: "" },
+      性别: { label: "" },
+      年龄: { label: "" },
+      最后在线时间: { label: "" },
+    }]));
+  }
+
   return (
     <DataGrid
-      items={[
-        {
-          序号: { label: 1 },
-          姓名: { label: "陈丹", icon: <DocumentRegular /> },
-          性别: { label: "女", status: "available" },
-          年龄: { label: "18岁", timestamp: 1 },
-          最后在线时间: { label: "2024/11/6 13:50" },
-        },
-        {
-          序号: { label: 2 },
-          姓名: { label: "蔡青松", icon: <FolderRegular /> },
-          性别: { label: "男", status: "busy" },
-          年龄: { label: "30岁", timestamp: 2 },
-          最后在线时间: { label: "2024/11/6 13:51" },
-        },
-        {
-          序号: { label: 3 },
-          姓名: { label: "杨东明", icon: <VideoRegular /> },
-          性别: { label: "男", status: "away" },
-          年龄: { label: "25岁", timestamp: 2 },
-          最后在线时间: { label: "2024/11/6 13:52" },
-        },
-        {
-          序号: { label: 4 },
-          姓名: { label: "吴瑞强", icon: <DocumentPdfRegular /> },
-          性别: { label: "男", status: "offline" },
-          年龄: { label: "25岁", timestamp: 3 },
-          最后在线时间: { label: "2024/11/6 13:53" },
-        },
-      ]}
+      items={newTableData}
       columns={[
         createTableColumn({
-          columnId: "序号",
-          fixed: true,
+          columnId: "姓名",
           compare: (a, b) => {
-            return a.序号.label - b.序号.label;
+            return a.姓名.label.localeCompare(b.姓名.label);
           },
           renderHeaderCell: () => {
             return (
-              <TableCellLayout media={<NumberCircle116Regular />}>
-                序号
-                <HeaderMenuList dataType={DATA_TYPE.数字} title="序号" columnId="序号" />
+              <TableCellLayout media={<TextField16Regular />}>
+                姓名
+                <HeaderMenuList dataType={DATA_TYPE.文本} title="姓名" columnId="姓名" />
               </TableCellLayout>
             );
           },
           renderCell: (item) => {
-            return item.序号.label;
+            return <ChangeBtnShowType cellData={item.姓名.label} />
           },
         }),
         createTableColumn({
-          columnId: "姓名",
+          columnId: "序号",
+          fixed: true,
           compare: (a, b) => {
-            return a.姓名.label.localeCompare(b.姓名.label);
+            return a.序号.label - b.序号.label;
           },
           renderHeaderCell: () => {
             return (
-              <TableCellLayout media={<TextField16Regular />}>
-                姓名
-                <HeaderMenuList dataType={DATA_TYPE.文本} title="姓名" columnId="姓名" />
+              <TableCellLayout media={<NumberCircle116Regular />}>
+                序号
+                <HeaderMenuList dataType={DATA_TYPE.数字} title="序号" columnId="序号" />
               </TableCellLayout>
             );
           },
           renderCell: (item) => {
-            return <ChangeBtnShowType cellData={item.姓名.label} />
+            return editType.edit == "true" ? <Input type="number" defaultValue={item.序号.label} style={{ width: "100%" }} /> : item.序号.label;
           },
         }),
+
         createTableColumn({
           columnId: "性别",
           compare: (a, b) => {
@@ -299,7 +322,10 @@ const List = () => {
             );
           },
           renderCell: (item) => {
-            return item.性别.label;
+            return editType.edit == "true" ? <Select style={{ width: "calc(100% - 70px)" }}>
+              <option value="男" selected={item.性别.label == "男"}>男</option>
+              <option value="女" selected={item.性别.label == "女"}>女</option>
+            </Select> : item.性别.label;
           },
         }),
         createTableColumn({
@@ -334,11 +360,7 @@ const List = () => {
             );
           },
           renderCell: (item) => {
-            return (
-              <TableCellLayout media={item.最后在线时间.icon}>
-                {item.最后在线时间.label}
-              </TableCellLayout>
-            );
+            return editType.edit == "true" ? <Input type="date" defaultValue={item.最后在线时间.label} /> : item.最后在线时间.label;
           },
         }),
       ]}
@@ -347,7 +369,7 @@ const List = () => {
       sortState={dataSortType}
       subtleSelection
       resizableColumns
-      defaultSelectedItems={defaultSelectedItems}
+      // defaultSelectedItems={defaultSelectedItems}
       style={{ minWidth: "550px" }}
     >
       <DataGridHeader>
@@ -369,7 +391,18 @@ const List = () => {
           </DataGridRow>
         )}
       </DataGridBody>
+
+      <Button
+        appearance="subtle"
+        icon={<Add16Filled />}
+        style={{ color: "#ca5010" }}
+        onClick={() => {
+          AddNewRow();
+        }}
+      >添加新项目</Button>
     </DataGrid>
+
+
   );
 };
 

src/router/index.js

@@ -19,7 +19,7 @@ const router = createBrowserRouter([
             },
             {
                 path: '/listnew',
-                element: <ListNew/>
+                element: <ListNew edit="true" />
             }
         ]
     }