# element-tree-grid

tree grid extends `element` ui with `vue` #### releases v1.0.4 - try to expand row expanded after data reload **having problems** with `` if you have any idea , **welcome !!!** > [demos](http://htmlpreview.github.io/?https://github.com/foolishchow/element-tree-grid/blob/master/example/test.html) > start - clone to your project ```shell git clone https://github.com/foolishchow/element-tree-grid.git cd element-tree-grid npm install #or yarn npm run dev ``` - use with node - install ```shell npm install element-tree-grid --save ``` - in you project ```javascript //common var ElTreeGrid = require('element-tree-grid'); Vue.component(ElTreeGrid.name,ElTreeGrid); ``` > useage - common useage ```html

``` - get children from remote - html ```html

``` - javascript ```javascript new Vue({ el: "#app", data: { model: { menus: trees } }, methods:{ remote(row,callback){ // async or sync are both supported setTimeout(function() { callback(row.children) },500) } } }) ``` - attributes > all props of `el-table-column` are supported; | name | description | values | | ----------- | :--------------------------------------------------------------------------------------------- | :-------------------------------------------: | | prop | same as `el-table-column` | | | label | same as `el-table-column` | | | width | same as `el-table-column` | | | fixed | same as `el-table-column` | | | resizable | same as `el-table-column` | | | formatter | same as `el-table-column` | | | className | same as `el-table-column` | | | treeKey | the key for neasted parse | type:`String`,
default:`'id'` | | childNumKey | the key of childNum | type:`String`,
default:`'child_num'` | | parentKey | the key of parent_id | type:`String`,
default:`'parent_id'` | | levelKey | the key of node's depth | type:`String`,
default:`'depth'` | | childKey | the key of node's children been placed | type:`String`,
default:`'children'` | | fileIcon | file icon className | type:`String`,
default:`'el-icon-file'` | | folderIcon | folder icon className ,when opend use: `folderIcon-open` | type:`String`,
default:`'el-icon-folder'` | | remote | remote method to get children | type:`Function`,
default:`null` | | allRemote | request all data from remote ,you have to config prop `remote` first,default use request cache | type:`Boolean`,
default:`false` | | expandAll | expand all nodes when loaded | type:`Boolean`,
default:`false` | | expandKey | key tells if the line is opened at inited ( just expended once ) | type:`String`,
default:`expanded` | | indentSize | indent number ,united in `px` | type:`Number`,
default:`14` | > examples - common ```html ``` - with formatter ```html ``` - with scopedSolts ```html ```