第一列浮动按钮

src/pages/listnew/index.jsx

@@ -196,50 +196,50 @@ const List = (editType) => {
    * @param item 包含姓名标签的对象
    * @returns 返回 JSX 元素
    */
-  const ChangeBtnShowType = (props) => {
-    const [showButton, setShowButton] = useState(false);
-    const handleMouseEnter = () => {
-      setShowButton(true);
-    };
-
-    const handleMouseLeave = () => {
-      setShowButton(false);
-    };
-
-    return (
-      <div
-        style={{
-          width: "100%",
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-        }}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-      >
-
-        <Input type="text" style={{ width: "calc(100% - 70px)" }} defaultValue={props.cellData} onChange={(e) => {
-
-        }} />
-        {showButton && (
-          <div>
-            <Tooltip content="更多操作" positioning="below">
-              <Button
-                appearance="subtle"
-                icon={<MoreHorizontal16Filled />}
-                onClick={() => {
-                  alert("更多操作");
-                }}
-              ></Button>
-            </Tooltip>
-            <Tooltip content="添加注释" positioning="below">
-              <Button appearance="subtle" icon={<CommentAdd16Regular />}></Button>
-            </Tooltip>
-          </div>
-        )}
-      </div>
-    );
-  };
+  // const ChangeBtnShowType = (props) => {
+  //   const [showButton, setShowButton] = useState(false);
+  //   const handleMouseEnter = () => {
+  //     setShowButton(true);
+  //   };
+
+  //   const handleMouseLeave = () => {
+  //     setShowButton(false);
+  //   };
+
+  //   return (
+  //     <div
+  //       style={{
+  //         width: "100%",
+  //         display: "flex",
+  //         justifyContent: "space-between",
+  //         alignItems: "center",
+  //       }}
+  //       onMouseEnter={handleMouseEnter}
+  //       onMouseLeave={handleMouseLeave}
+  //     >
+
+  //       <Input type="text" style={{ width: "calc(100% - 70px)" }} defaultValue={props.cellData} onChange={(e) => {
+
+  //       }} />
+  //       {showButton && (
+  //         <div>
+  //           <Tooltip content="更多操作" positioning="below">
+  //             <Button
+  //               appearance="subtle"
+  //               icon={<MoreHorizontal16Filled />}
+  //               onClick={() => {
+  //                 alert("更多操作");
+  //               }}
+  //             ></Button>
+  //           </Tooltip>
+  //           <Tooltip content="添加注释" positioning="below">
+  //             <Button appearance="subtle" icon={<CommentAdd16Regular />}></Button>
+  //           </Tooltip>
+  //         </div>
+  //       )}
+  //     </div>
+  //   );
+  // };
 
   const tableData = [
     {
@@ -295,6 +295,10 @@ const List = (editType) => {
   //右键选中行
   const [selectRow, setSelectRow] = useState(-1);
 
+  const [showCellButton, setShowCellButton] = useState(false);
+  const [mouseEnterRowId, setMouseEnterRowId] = useState(-1);
+  const [mouseEnterColumnId, setmouseEnterColumnId] = useState(-1);
+
   /**
  * 列头“合计”二级菜单
  */
@@ -368,14 +372,14 @@ const List = (editType) => {
     );
   }
 
-  const [showButton, setShowButton] = useState(false);
-  const handleMouseEnter = () => {
-    setShowButton(true);
-  };
+  // const [showButton, setShowButton] = useState(false);
+  // const handleMouseEnter = () => {
+  //   setShowButton(true);
+  // };
 
-  const handleMouseLeave = () => {
-    setShowButton(false);
-  };
+  // const handleMouseLeave = () => {
+  //   setShowButton(false);
+  // };
 
   return (
     <>
@@ -397,16 +401,40 @@ const List = (editType) => {
               );
             },
             renderCell: (item, rowId, columnId) => {
-              if (rowId == editRowId && editType.edit == "true" && editColumnId == columnId) {
-                return <Input type="text" defaultValue={item.姓名.label} style={{ width: "100%" }} appearance="underline" autoFocus onChange={(e) => {
-                  item.姓名.label = e.target.value;
-                }} onBlur={() => {
-                  setEditRowId(-1);
-                  setEditColumnId(-1);
-                }} />;
-              } else {
-                return item.姓名.label;
-              }
+              return (
+                <div
+                  style={{
+                    width: "100%",
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                  }}
+                >
+
+                  {rowId == editRowId && editType.edit == "true" && editColumnId == columnId ? <Input type="text" style={{ width: "calc(100% - 70px)" }} defaultValue={item.姓名.label} appearance="underline" autoFocus onChange={(e) => {
+                    item.姓名.label = e.target.value;
+                  }} onBlur={() => {
+                    setEditRowId(-1);
+                    setEditColumnId(-1);
+                  }} /> : item.姓名.label}
+                  {showCellButton && mouseEnterRowId == rowId && mouseEnterColumnId == columnId && (
+                    <div>
+                      <Tooltip content="更多操作" positioning="below">
+                        <Button
+                          appearance="subtle"
+                          icon={<MoreHorizontal16Filled />}
+                          onClick={() => {
+                            alert("更多操作");
+                          }}
+                        ></Button>
+                      </Tooltip>
+                      <Tooltip content="添加注释" positioning="below">
+                        <Button appearance="subtle" icon={<CommentAdd16Regular />}></Button>
+                      </Tooltip>
+                    </div>
+                  )}
+                </div>
+              );
             },
           }),
           createTableColumn({
@@ -551,7 +579,18 @@ const List = (editType) => {
                     <DataGridCell onClick={(e) => {
                       setEditRowId(rowId);
                       setEditColumnId(columnId);
-                    }}>{renderCell(item, rowId, columnId)}</DataGridCell>
+                    }}
+                      onMouseEnter={(e) => {
+                        setShowCellButton(true);
+                        setMouseEnterRowId(rowId);
+                        setmouseEnterColumnId(columnId);
+                      }}
+                      onMouseLeave={(e) => {
+                        setShowCellButton(false);
+                        setMouseEnterRowId(-1);
+                        setmouseEnterColumnId(-1);
+                      }}
+                    >{renderCell(item, rowId, columnId)}</DataGridCell>
                   )}
                 </DataGridRow>
               </MenuTrigger>