yexuejc007/PlayEdu-backend
1
0
Fork 0
mirror of https://github.com/PlayEdu/backend synced 2025-06-22 22:12:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

树形组件样式优化

Browse Source
This commit is contained in:
禺狨 2023-03-13 09:54:02 +08:00
parent 5bc78f6192
commit 69da71b7c2
3 changed files with 32 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/compenents/tree-category/index.tsx
View File

@ -1,7 +1,6 @@
import { Button, Input, message, Tree } from "antd"; import { Button, Input, message, Tree } from "antd";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { resourceCategory } from "../../api/index"; import { resourceCategory } from "../../api/index";
import type { TreeProps } from "antd/es/tree";
interface Option { interface Option {
key: string | number; key: string | number;
@ -64,18 +63,6 @@ export const TreeCategory = (props: PropInterface) => {
setSelectKey(selectedKeys); setSelectKey(selectedKeys);
}; };
const onDragEnter: TreeProps["onDragEnter"] = (info) => {
console.log(info);
// expandedKeys 需要受控时设置
// setExpandedKeys(info.expandedKeys)
};
const onDrop: TreeProps["onDrop"] = (info) => {
console.log(info);
// expandedKeys 需要受控时设置
// setExpandedKeys(info.expandedKeys)
};
return ( return (
<div> <div>
<div <div
@ -88,13 +75,7 @@ export const TreeCategory = (props: PropInterface) => {
> >
全部{props.text} 全部{props.text}
</div> </div>
<Tree <Tree onSelect={onSelect} treeData={treeData} />
onSelect={onSelect}
treeData={treeData}
draggable
onDragEnter={onDragEnter}
onDrop={onDrop}
/>
</div> </div>
); );
}; };

23
src/compenents/tree-department/index.tsx
View File

@ -1,7 +1,6 @@
import { Button, Input, message, Tree } from "antd"; import { Button, Input, message, Tree } from "antd";
import { useState, useEffect } from "react"; import { useState, useEffect } from "react";
import { department } from "../../api/index"; import { department } from "../../api/index";
import type { TreeProps } from "antd/es/tree";
interface Option { interface Option {
key: string | number; key: string | number;
@ -56,25 +55,5 @@ export const TreeDepartment = (props: PropInterface) => {
props.onUpdate(selectedKeys); props.onUpdate(selectedKeys);
}; };
const onDragEnter: TreeProps["onDragEnter"] = (info) => { return <Tree onSelect={onSelect} treeData={treeData} />;
console.log(info);
// expandedKeys 需要受控时设置
// setExpandedKeys(info.expandedKeys)
};
const onDrop: TreeProps["onDrop"] = (info) => {
console.log(info);
// expandedKeys 需要受控时设置
// setExpandedKeys(info.expandedKeys)
};
return (
<Tree
onSelect={onSelect}
treeData={treeData}
draggable
onDragEnter={onDragEnter}
onDrop={onDrop}
/>
);
}; };

30
src/index.less
View File

@ -327,3 +327,33 @@ textarea.ant-input {
.c-gray { .c-gray {
color: rgba(#333333, 0.3); color: rgba(#333333, 0.3);
} }
.ant-tree-treenode {
width: 100% !important;
height: 40px !important;
padding: 0 !important;
margin-bottom: 8px !important;
display: flex;
align-items: center !important;
&.ant-tree-treenode-selected {
background-color: #fff2f0 !important;
border-radius: 6px !important;
overflow: hidden;
}
&:hover {
border-radius: 6px !important;
overflow: hidden;
}
.ant-tree-node-content-wrapper-normal {
width: 100% !important;
height: 40px !important;
display: flex;
align-items: center;
}
.ant-tree-switcher {
height: 40px !important;
display: flex;
align-items: center;
}
}