• Home
• com.base4j
• base4j-mvc
• 1.3.0
• source code
• tree-table-doc.md

×

Project download

Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $

You can buy this project and download/modify it how often you want.

static.lib.extends.tree-table-doc.md Maven / Gradle / Ivy

# element-tree-grid

    
        
     
    
        
    


tree grid extends `element` ui  with `vue`

> start

- clone to your project
    ```shell
    git clone https://github.com/foolishchow/element-tree-grid.git
    cd element-tree-grid
    npm install #or yarn
    gulp 
    ```

- 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);
    //import from source code . so you can build them with your webpack or rollup ..
    import ElTableTreeColumn from  'element-tree-grid/src/index.js';
    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){
                setTimeout(function() {
                    callback(row.children)
                },500)
            }
        }
    })
    ```
- attributes

    | name          | description              | values          |
    | ------------- |:------------------------|:---------------:|
    | prop          | same as `el-table-item`  |                 |
    | label         | same as `el-table-item`  |                 |
    | width         | same as `el-table-item`  |                 |
    | fixed         | same as `el-table-item`  |                 |
    | resizable     | same as `el-table-item`  |                 |
    | formatter     | same as `el-table-item`  |                 |
    | className     | same as `el-table-item`  |                 |
    | 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`|
    | expandAll    | expand all nodes when loaded | type:`Boolean`,
default:`false`|
    | expandKey    | key tells if the line is opened | type:`String`,
default:`expanded`|

> examples 

- common 
```html

```

- with formatter
```html

```

- with scopedSolts
```html

    

```