element tree table with vue
npm install element-tree-gridtree 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
> 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`
folder-icon="icon icon-folder"
prop="label" label="labelname" width="220">
`
- get children from remote
- html
html`
file-icon="icon icon-file"
folder-icon="icon icon-folder"
prop="label" label="MenuName" width="320">
`
- 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)
}
}
})
el-table-column
- attributes
> all props of are supported;
| name | description | values |
| ----------- | :--------------------------------------------------------------------------------------------- | :-------------------------------------------: |
| prop | same as el-table-column | |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 | |String
| treeKey | the key for neasted parse | type:,'id'
default: |String
| childNumKey | the key of childNum | type:,'child_num'
default: |String
| parentKey | the key of parent_id | type:, 'parent_id'
default: |String
| levelKey | the key of node's depth | type:,'depth'
default: |String
| childKey | the key of node's children been placed | type:, 'children'
default: |String
| fileIcon | file icon className | type:, 'el-icon-file'
default: |folderIcon-open
| folderIcon | folder icon className ,when opend use: | type:String,'el-icon-folder'
default: |Function
| remote | remote method to get children | type:,null
default: |remote
| allRemote | request all data from remote ,you have to config prop first,default use request cache | type:Boolean,false
default: |Boolean
| expandAll | expand all nodes when loaded | type:,false
default: |String
| expandKey | key tells if the line is opened at inited ( just expended once ) | type:,expanded
default: |px
| indentSize | indent number ,united in | type:Number,14
default: |
> examples
- common
`html`
folder-icon="icon icon-folder"
prop="label"
label="labelname"
width="220">
- with formatter
`html`
folder-icon="icon icon-folder"
prop="label"
label="labelname"
:formatter="formatter"
width="220">
- with scopedSolts
`html``
folder-icon="icon icon-folder"
prop="label"
label="labelname"
width="220">
prefix =>
{{scope.row.label}} -- {{scope.row.id}}
<= suffix