{"id":19234988,"url":"https://github.com/lecepin/lp-react-tree-drag","last_synced_at":"2025-07-16T06:41:29.987Z","repository":{"id":109069821,"uuid":"343433805","full_name":"lecepin/lp-react-tree-drag","owner":"lecepin","description":"树形拖拉排序组件。","archived":false,"fork":false,"pushed_at":"2021-11-23T12:39:28.000Z","size":683,"stargazers_count":4,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-01T10:01:49.160Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://lecepin.github.io/lp-react-tree-drag/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lecepin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-03-01T13:54:10.000Z","updated_at":"2021-11-23T12:39:31.000Z","dependencies_parsed_at":null,"dependency_job_id":"700b6c3b-979c-4cc0-a694-67e4b181654c","html_url":"https://github.com/lecepin/lp-react-tree-drag","commit_stats":{"total_commits":5,"total_committers":2,"mean_commits":2.5,"dds":"0.19999999999999996","last_synced_commit":"6c114dd08448553e9e0cabe316754682690d11ab"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lecepin%2Flp-react-tree-drag","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lecepin%2Flp-react-tree-drag/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lecepin%2Flp-react-tree-drag/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lecepin%2Flp-react-tree-drag/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lecepin","download_url":"https://codeload.github.com/lecepin/lp-react-tree-drag/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248659982,"owners_count":21141219,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-09T16:15:35.142Z","updated_at":"2025-04-21T05:31:32.357Z","avatar_url":"https://github.com/lecepin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# lp-react-tree-drag 树形拖拽排序\n\n树形拖拽排序组件。\n\n### 安装\n\n```js\nnpm i -S lp-react-tree-drag\n```\n\n### 使用\n\n| 属性        | 类型              | 默认值 | 备注             |\n| ----------- | ----------------- | ------ | ---------------- |\n| expandedAll | Boolean           | false  | 默认是否展开节点 |\n| showLine    | Boolean           | false  | 是否显示组连线   |\n| Data        | `Array\u003cTreeData\u003e` | []     | 树信息           |\n| onHover        | fun | []     |            |\n| onChange        | fun | []     |            |\n| onSelect        | fun | []     |            |\n\n#### `TreeData`\n\n| 属性        | 类型                             | 默认值 | 备注             |\n| ----------- | -------------------------------- | ------ | ---------------- |\n| id       | String|Number                           |        |                  |\n| title       | String                           |        |                  |\n| type        | `emun {'page', 'group', 'link'}` |        |                  |\n| children    | `Array\u003cTreeData\u003e`                |        |                  |\n| renderOp    | `Function(props):ReactElement`   |        | 自定义渲染操作区 |\n| renderIcon  | `Function(props):ReactElement`   |        | 自定义渲染图标   |\n| renderTitle | `Function(props):ReactElement`   |        | 自定义渲染标题   |\n\n### 示例\n\n```js\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nimport LpReactTreeDrag from \"lp-react-tree-drag\";\n\nReactDOM.render(\n  \u003cReact.StrictMode\u003e\n    \u003cLpReactTreeDrag\n      expandedAll={true}\n      showLine={true}\n      data={[\n        {\n          title: \"首页\",\n          type: \"page\",\n          children: [],\n          renderOp: (props) =\u003e (\n            \u003c\u003e\n              \u003ca href=\"#\"\u003e编辑\u003c/a\u003e\u0026nbsp;\n              \u003ca href=\"#\"\u003e隐藏\u003c/a\u003e\n            \u003c/\u003e\n          ),\n        },\n        {\n          title: \"团队管理\",\n          type: \"group\",\n          expanded: !0,\n          renderOp: (props) =\u003e (\n            \u003c\u003e\n              \u003ca href=\"#\"\u003e编辑\u003c/a\u003e\u0026nbsp;\n              \u003ca href=\"#\"\u003e隐藏\u003c/a\u003e\n            \u003c/\u003e\n          ),\n          children: [\n            {\n              title: \"技术管理\",\n              type: \"page\",\n              children: [],\n              renderOp: (props) =\u003e (\n                \u003c\u003e\n                  \u003ca href=\"#\"\u003e编辑\u003c/a\u003e\u0026nbsp;\n                  \u003ca href=\"#\"\u003e隐藏\u003c/a\u003e\n                \u003c/\u003e\n              ),\n            },\n            {\n              title: \"战役管理\",\n              type: \"page\",\n              children: [],\n              renderOp: (props) =\u003e (\n                \u003c\u003e\n                  \u003ca href=\"#\"\u003e编辑\u003c/a\u003e\u0026nbsp;\n                  \u003ca href=\"#\"\u003e隐藏\u003c/a\u003e\n                \u003c/\u003e\n              ),\n            },\n            { title: \"a1\", type: \"page\", children: [] },\n            { title: \"a2\", type: \"page\", children: [] },\n            {\n              title: \"事项管理\",\n              type: \"group\",\n              renderOp: (props) =\u003e (\n                \u003c\u003e\n                  \u003ca href=\"#\"\u003e编辑\u003c/a\u003e\u0026nbsp;\n                  \u003ca href=\"#\"\u003e隐藏\u003c/a\u003e\n                \u003c/\u003e\n              ),\n              children: [\n                { title: \"产品管理\", type: \"page\", children: [] },\n                { title: \"业务管理\", type: \"page\", children: [] },\n              ],\n            },\n          ],\n        },\n        {\n          title: \"关于我们\",\n          type: \"link\",\n          children: [],\n          renderOp: (props) =\u003e (\n            \u003c\u003e\n              \u003ca href=\"#\"\u003e编辑\u003c/a\u003e\u0026nbsp;\n              \u003ca href=\"#\"\u003e隐藏\u003c/a\u003e\n            \u003c/\u003e\n          ),\n        },\n      ]}\n    /\u003e\n  \u003c/React.StrictMode\u003e,\n  document.getElementById(\"root\")\n);\n```\n\n![](https://img.alicdn.com/imgextra/i3/O1CN013GCVrb1STAcfOlpwV_!!6000000002247-1-tps-670-358.gif)\n\n[预览](https://lecepin.github.io/lp-react-tree-drag/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flecepin%2Flp-react-tree-drag","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flecepin%2Flp-react-tree-drag","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flecepin%2Flp-react-tree-drag/lists"}