{"id":19304106,"url":"https://github.com/foolishchow/element-tree-grid","last_synced_at":"2025-04-05T08:05:18.267Z","repository":{"id":48020673,"uuid":"85017586","full_name":"foolishchow/element-tree-grid","owner":"foolishchow","description":"tree grid extends element ui  with vue","archived":false,"fork":false,"pushed_at":"2022-12-06T19:47:24.000Z","size":7093,"stargazers_count":226,"open_issues_count":17,"forks_count":62,"subscribers_count":14,"default_branch":"master","last_synced_at":"2024-04-26T12:47:36.404Z","etag":null,"topics":["element","element-ui","grid","tree","tree-grid","tree-table","vue"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/foolishchow.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}},"created_at":"2017-03-15T02:04:29.000Z","updated_at":"2023-06-27T07:54:46.000Z","dependencies_parsed_at":"2023-01-23T12:25:16.510Z","dependency_job_id":null,"html_url":"https://github.com/foolishchow/element-tree-grid","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foolishchow%2Felement-tree-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foolishchow%2Felement-tree-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foolishchow%2Felement-tree-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foolishchow%2Felement-tree-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/foolishchow","download_url":"https://codeload.github.com/foolishchow/element-tree-grid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247305933,"owners_count":20917208,"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":["element","element-ui","grid","tree","tree-grid","tree-table","vue"],"created_at":"2024-11-09T23:28:43.025Z","updated_at":"2025-04-05T08:05:18.229Z","avatar_url":"https://github.com/foolishchow.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# element-tree-grid\n\u003cp\u003e\n    \u003ca href=\"https://www.npmjs.com/package/element-tree-grid\"\u003e\n        \u003cimg src=\"https://img.shields.io/npm/v/element-tree-grid.svg\" alt=\"Version\"\u003e\n    \u003c/a\u003e \n    \u003ca href=\"https://www.npmjs.com/package/element-tree-grid\"\u003e\n        \u003cimg src=\"https://img.shields.io/npm/dm/element-tree-grid.svg\" alt=\"Downloads\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\ntree grid extends `element` ui  with `vue`   \n\n#### releases v1.0.4\n- try to expand row expanded after data reload\n\n\n**having problems** with `\u003cel-table-column type=\"selection\" fixed\u003e\u003c/el-table-column\u003e`    \n\nif you have any idea , **welcome !!!**\n\n\n\u003e [demos](http://htmlpreview.github.io/?https://github.com/foolishchow/element-tree-grid/blob/master/example/test.html) \n\n\u003e start\n\n- clone to your project\n    ```shell\n    git clone https://github.com/foolishchow/element-tree-grid.git\n    cd element-tree-grid\n    npm install #or yarn\n    npm run dev\n    ```\n\n- use with node\n    - install\n    ```shell\n    npm install element-tree-grid --save\n    ```\n    - in you project \n\n    ```javascript\n    //common \n    var ElTreeGrid = require('element-tree-grid');\n    Vue.component(ElTreeGrid.name,ElTreeGrid);\n    ```\n\n\n\u003e useage   \n\n- common useage\n    ```html\n    \u003cel-table :data=\"model.menus\" border max-height=\"250\"\u003e\n        \u003cel-table-tree-column \n            file-icon=\"icon icon-file\" \n            folder-icon=\"icon icon-folder\" \n            prop=\"label\" label=\"labelname\" width=\"220\"\u003e\u003c/el-table-tree-column\u003e\n        \u003cel-table-column prop=\"description\" label=\"description\"   width=\"180\"\u003e\u003c/el-table-column\u003e\n    \u003c/el-table\u003e\n    ```\n- get children from remote\n    - html\n    ```html\n    \u003cdiv id=\"app\" style=\"padding: 30px;\"\u003e\n        \u003cel-table :data=\"model.menus\" border max-height=\"400\"\u003e\n            \u003cel-table-tree-column \n                :remote=\"remote\"\n                file-icon=\"icon icon-file\" \n                folder-icon=\"icon icon-folder\" \n                prop=\"label\" label=\"MenuName\" width=\"320\"\u003e\u003c/el-table-tree-column\u003e\n            \u003cel-table-column prop=\"id\" label=\"id\" width=\"180\"\u003e\u003c/el-table-column\u003e\n            \u003cel-table-column prop=\"description\" label=\"Description\" :show-overflow-tooltip=\"true\" width=\"180\"\u003e\u003c/el-table-column\u003e\n        \u003c/el-table\u003e\n    \u003c/div\u003e\n    ```\n    - javascript   \n    ```javascript\n    new Vue({\n        el: \"#app\",\n        data: {\n            model: {\n                menus: trees\n            }\n        },\n        methods:{\n            remote(row,callback){\n                // async or sync are both supported\n                setTimeout(function() {\n                    callback(row.children)\n                },500)\n            }\n        }\n    })\n    ```\n- attributes\n    \u003e all props of `el-table-column` are supported;\n\n    | name        | description                                                                                    |                    values                     |\n    | ----------- | :--------------------------------------------------------------------------------------------- | :-------------------------------------------: |\n    | prop        | same as `el-table-column`                                                                      |                                               |\n    | label       | same as `el-table-column`                                                                      |                                               |\n    | width       | same as `el-table-column`                                                                      |                                               |\n    | fixed       | same as `el-table-column`                                                                      |                                               |\n    | resizable   | same as `el-table-column`                                                                      |                                               |\n    | formatter   | same as `el-table-column`                                                                      |                                               |\n    | className   | same as `el-table-column`                                                                      |                                               |\n    | treeKey     | the key for neasted parse                                                                      |       type:`String`,\u003cbr\u003e default:`'id'`       |\n    | childNumKey | the key of childNum                                                                            |   type:`String`,\u003cbr\u003e default:`'child_num'`    |\n    | parentKey   | the key of parent_id                                                                           |   type:`String`, \u003cbr\u003edefault:`'parent_id'`    |\n    | levelKey    | the key of node's depth                                                                        |     type:`String`,\u003cbr\u003e default:`'depth'`      |\n    | childKey    | the key of node's children been placed                                                         |    type:`String`, \u003cbr\u003edefault:`'children'`    |\n    | fileIcon    | file icon className                                                                            |  type:`String`, \u003cbr\u003edefault:`'el-icon-file'`  |\n    | folderIcon  | folder icon className ,when opend use: `folderIcon-open`                                       | type:`String`,\u003cbr\u003e default:`'el-icon-folder'` |\n    | remote      | remote method to get children                                                                  |      type:`Function`,\u003cbr/\u003edefault:`null`      |\n    | allRemote   | request all data from remote ,you have to config prop `remote` first,default use request cache |      type:`Boolean`,\u003cbr/\u003edefault:`false`      |\n    | expandAll   | expand all nodes when loaded                                                                   |      type:`Boolean`,\u003cbr/\u003edefault:`false`      |\n    | expandKey   | key tells if the line is opened at inited ( just expended once )                               |     type:`String`,\u003cbr/\u003edefault:`expanded`     |\n    | indentSize  | indent number ,united in `px`                                                                  |        type:`Number`,\u003cbr/\u003edefault:`14`        |\n\n\u003e examples \n\n- common \n```html\n\u003cel-table-tree-column \n            file-icon=\"icon icon-file\" \n            folder-icon=\"icon icon-folder\" \n            prop=\"label\" \n            label=\"labelname\" \n            width=\"220\"\u003e\u003c/el-table-tree-column\u003e\n```\n\n- with formatter\n```html\n\u003cel-table-tree-column \n            file-icon=\"icon icon-file\" \n            folder-icon=\"icon icon-folder\" \n            prop=\"label\" \n            label=\"labelname\" \n            :formatter=\"formatter\"\n            width=\"220\"\u003e\u003c/el-table-tree-column\u003e\n```\n\n- with scopedSolts\n```html\n\u003cel-table-tree-column \n            file-icon=\"icon icon-file\" \n            folder-icon=\"icon icon-folder\" \n            prop=\"label\" \n            label=\"labelname\" \n            width=\"220\"\u003e\n    \u003ctemplate slot-scope=\"scope\"\u003e\n        \u003cspan\u003eprefix =\u003e\u003c/span\u003e\n        \u003cspan\u003e{{scope.row.label}} -- {{scope.row.id}}\u003c/span\u003e \n        \u003cspan\u003e\u003c= suffix\u003c/span\u003e   \n    \u003c/template\u003e\n\u003c/el-table-tree-column\u003e\n```\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoolishchow%2Felement-tree-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffoolishchow%2Felement-tree-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoolishchow%2Felement-tree-grid/lists"}