Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/foolishchow/element-tree-grid
tree grid extends element ui with vue
https://github.com/foolishchow/element-tree-grid
element element-ui grid tree tree-grid tree-table vue
Last synced: 5 days ago
JSON representation
tree grid extends element ui with vue
- Host: GitHub
- URL: https://github.com/foolishchow/element-tree-grid
- Owner: foolishchow
- Created: 2017-03-15T02:04:29.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-06T19:47:24.000Z (about 2 years ago)
- Last Synced: 2024-04-26T12:47:36.404Z (10 months ago)
- Topics: element, element-ui, grid, tree, tree-grid, tree-table, vue
- Language: TypeScript
- Size: 6.76 MB
- Stars: 226
- Watchers: 14
- Forks: 62
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
prefix =>
{{scope.row.label}} -- {{scope.row.id}}
<= suffix
```