{"id":19057417,"url":"https://github.com/femessage/el-data-tree","last_synced_at":"2025-11-12T02:03:45.299Z","repository":{"id":56378138,"uuid":"172700375","full_name":"FEMessage/el-data-tree","owner":"FEMessage","description":"🌴Base on element-ui, makes tree component crud easily","archived":false,"fork":false,"pushed_at":"2020-11-11T10:17:34.000Z","size":12731,"stargazers_count":29,"open_issues_count":5,"forks_count":12,"subscribers_count":2,"default_branch":"dev","last_synced_at":"2025-02-03T14:05:41.567Z","etag":null,"topics":["crud","element-ui","restapi","tree"],"latest_commit_sha":null,"homepage":"https://femessage.github.io/el-data-tree/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FEMessage.png","metadata":{"files":{"readme":"README-zh.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-02-26T11:40:48.000Z","updated_at":"2024-08-09T06:15:14.000Z","dependencies_parsed_at":"2022-08-15T17:40:25.323Z","dependency_job_id":null,"html_url":"https://github.com/FEMessage/el-data-tree","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FEMessage%2Fel-data-tree","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FEMessage%2Fel-data-tree/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FEMessage%2Fel-data-tree/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FEMessage%2Fel-data-tree/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FEMessage","download_url":"https://codeload.github.com/FEMessage/el-data-tree/tar.gz/refs/heads/dev","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240113944,"owners_count":19749829,"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":["crud","element-ui","restapi","tree"],"created_at":"2024-11-08T23:57:03.764Z","updated_at":"2025-11-12T02:03:40.252Z","avatar_url":"https://github.com/FEMessage.png","language":"Vue","readme":"# el-data-tree\n\n[![Build Status](https://travis-ci.com/FEMessage/el-data-tree.svg?branch=master)](https://travis-ci.com/FEMessage/el-data-tree)\n[![NPM Download](https://img.shields.io/npm/dm/@femessage/el-data-tree.svg)](https://www.npmjs.com/package/@femessage/el-data-tree)\n[![NPM Version](https://img.shields.io/npm/v/@femessage/el-data-tree.svg)](https://www.npmjs.com/package/@femessage/el-data-tree)\n[![NPM License](https://img.shields.io/npm/l/@femessage/el-data-tree.svg)](https://github.com/FEMessage/el-data-tree/blob/master/LICENSE)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/FEMessage/el-data-tree/pulls)\n[![Automated Release Notes by gren](https://img.shields.io/badge/%F0%9F%A4%96-release%20notes-00B2EE.svg)](https://github-tools.github.io/github-release-notes/)\n\n使用`axios`自动发送请求，支持筛选, 自定义操作列, 让 RESTful 风格的 CRUD 更简单 👏\n\n![el-data-tree-crud.gif](https://i.loli.net/2019/11/14/xd3mkSXasu1oe2n.gif)\n\n## Table of Contents \u003c!-- omit in toc --\u003e\n\n- [Introduction](#introduction)\n  - [CRUD](#crud)\n- [Feature](#feature)\n- [Demo](#demo)\n- [Pre Install](#pre-install)\n- [Install](#install)\n- [Quick Start](#quick-start)\n  - [Global Register Component](#global-register-component)\n  - [Template](#template)\n- [Contributors](#contributors)\n- [License](#license)\n\n## Introduction\n\n### CRUD\n\nel-data-tree 就是为了解决业务问题而生的，故而封装了 CRUD 的逻辑在里面。\n\n以用户接口示例，设其相对路径为:\n\n```sh\n/api/v1/users\n```\n\n则其 restful CRUD 接口如下：\n\n- 查询\n\n```sh\nGET /api/v1/users?type=1\n```\n\n- 新增\n\n```sh\nPOST /api/v1/users\n```\n\n- 修改(编辑)\n\n```sh\nPUT /api/v1/users/:id\n```\n\n- 删除\n\n```sh\nDELETE /api/v1/users/:id\n```\n\n则只需要使用以下代码，即可完成 CRUD 功能\n\n```vue\n\u003ctemplate\u003e\n  \u003cel-data-tree v-bind=\"treeConfig\"\u003e\u003c/el-data-tree\u003e\n\u003c/template\u003e\n```\n\n```js\n\u003cscript\u003e\nexport default {\n  data() {\n    return {\n      treeConfig: {\n        url: '/example/users',\n        dataPath: 'data.payload',\n        showFilter: true,\n        form: [\n          {\n            type: 'input',\n            id: 'name',\n            label: '用户名',\n            el: {\n              placeholder: '请输入'\n            },\n            rules: [\n              {\n                required: true,\n                message: '请输入用户名',\n                trigger: 'blur'\n              }\n            ]\n          }\n        ]\n      }\n    }\n  }\n}\n\u003c/script\u003e\n```\n\n效果如下：\n\n- 查询\n\n![el-data-tree-search.png](https://i.loli.net/2019/11/14/onYZzKgP8lScEyi.png)\n\n- 新增\n\n![el-data-tree-add.png](https://i.loli.net/2019/11/14/NKjsl2Bf5ZQ39pb.png)\n\n- 修改\n\n![el-data-tree-modify.png](https://i.loli.net/2019/11/14/QG2hpXIbrB1lZNv.png)\n\n- 删除\n\n![el-data-tree-delete.png](https://i.loli.net/2019/11/14/t7JmLonjlpRVq9K.png)\n\n[⬆ Back to Top](#table-of-contents)\n\n## Feature\n\n- 只需进行 json 配置，即可实现 restful 风格的 CRUD 四个接口的对接\n- 可扩展自定义菜单栏，以及自定义操作函数\n- 默认保存展开状态，新增、删除、编辑不丢失该状态\n- 优化节点勾选方法\n\n[⬆ Back to Top](#table-of-contents)\n\n## Demo\n\n- [doc and online demo](https://femessage.github.io/el-data-tree/)\n\n[⬆ Back to Top](#table-of-contents)\n\n## Pre Install\n\nthis component peerDependencies on [element-ui](http://element.eleme.io/#/zh-CN/component/tree) and [@femessage/el-form-renderer](https://github.com/FEMessage/el-form-renderer) and [axios](https://github.com/axios/axios)\n\nmake sure you have installed in your project\n\n```sh\nyarn add element-ui @femessage/el-form-renderer axios\n```\n\nif you want to develop the component on your localhost, you should install with -P\n\n```sh\nyarn add element-ui @femessage/el-form-renderer axios -P\n```\n\n[⬆ Back to Top](#table-of-contents)\n\n## Install\n\nencourage using [yarn](https://yarnpkg.com/en/docs/install#mac-stable) to install\n\n```sh\nyarn add @femessage/el-data-tree\n```\n\n[⬆ Back to Top](#table-of-contents)\n\n## Quick Start\n\n### Global Register Component\n\nthis is for minification reason: in this way building your app,\n\nwebpack or other bundler just bundle the dependencies into one vendor for all pages which using this component,\n\ninstead of one vendor for one page\n\n```js\nimport Vue from 'vue'\n\n// register component and loading directive\nimport ElDataTree from '@femessage/el-data-tree'\nimport ElFormRenderer from '@femessage/el-form-renderer'\nimport {\n  Button,\n  Dialog,\n  Dropdown,\n  DropdownMenu,\n  DropdownItem,\n  Form,\n  FormItem,\n  Input,\n  Loading,\n  Tree,\n  MessageBox,\n  Message\n} from 'element-ui'\n\nVue.use(Button)\nVue.use(Dialog)\nVue.use(Dropdown)\nVue.use(DropdownMenu)\nVue.use(DropdownItem)\nVue.use(Form)\nVue.use(FormItem)\nVue.use(Input)\nVue.use(Loading.directive)\nVue.use(Tree)\nVue.component('el-form-renderer', ElFormRenderer)\nVue.component('el-data-tree', ElDataTree)\n\n// to show confirm before delete\nVue.prototype.$confirm = MessageBox.confirm\n// if the tree component cannot access `this.$axios`, it cannot send request\nimport axios from 'axios'\nVue.prototype.$axios = axios\n```\n\n[⬆ Back to Top](#table-of-contents)\n\n### Template\n\n```vue\n\u003ctemplate\u003e\n  \u003cel-data-tree\u003e\u003c/el-data-tree\u003e\n\u003c/template\u003e\n```\n\n[⬆ Back to Top](#table-of-contents)\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore --\u003e\n\u003ctable\u003e\u003ctr\u003e\u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/Alvin-Liu\"\u003e\u003cimg src=\"https://avatars0.githubusercontent.com/u/11909145?v=4\" width=\"100px;\" alt=\"Alvin\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAlvin\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/FEMessage/el-data-tree/commits?author=Alvin-Liu\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"https://github.com/FEMessage/el-data-tree/commits?author=Alvin-Liu\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#example-Alvin-Liu\" title=\"Examples\"\u003e💡\u003c/a\u003e\u003c/td\u003e\u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/levy9527/blog\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/9384365?v=4\" width=\"100px;\" alt=\"levy\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003elevy\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#review-levy9527\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e \u003ca href=\"#translation-levy9527\" title=\"Translation\"\u003e🌍\u003c/a\u003e\u003c/td\u003e\u003ctd align=\"center\"\u003e\u003ca href=\"https://coldstone.fun\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/18013127?v=4\" width=\"100px;\" alt=\"Cold Stone\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eCold Stone\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/FEMessage/el-data-tree/commits?author=xrr2016\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\u003ctd align=\"center\"\u003e\u003ca href=\"https://evila.me\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/19513289?v=4\" width=\"100px;\" alt=\"EVILLT\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eEVILLT\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/FEMessage/el-data-tree/commits?author=evillt\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#maintenance-evillt\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e\u003c/td\u003e\u003ctd align=\"center\"\u003e\u003ca href=\"https://donaldshen.github.io/portfolio\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/19591950?v=4\" width=\"100px;\" alt=\"Donald Shen\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDonald Shen\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/FEMessage/el-data-tree/commits?author=donaldshen\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#maintenance-donaldshen\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e\u003c/td\u003e\u003ctd align=\"center\"\u003e\u003ca href=\"https://colmugx.github.io\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/21327913?v=4\" width=\"100px;\" alt=\"ColMugX\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eColMugX\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#maintenance-colmugx\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e\u003c/td\u003e\u003ctd align=\"center\"\u003e\u003ca href=\"http://67.216.223.155/resume/\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/26338853?v=4\" width=\"100px;\" alt=\"OuZuYu\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eOuZuYu\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/FEMessage/el-data-tree/issues?q=author%3AOuZuYu\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n\n[⬆ Back to Top](#table-of-contents)\n\n## License\n\n[MIT](./LICENSE)\n\n[⬆ Back to Top](#table-of-contents)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffemessage%2Fel-data-tree","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffemessage%2Fel-data-tree","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffemessage%2Fel-data-tree/lists"}