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 <el-table-column type="selection" fixed></el-table-column>
if you have any idea , welcome !!!
start
-
clone to your project
git clone https://github.com/foolishchow/element-tree-grid.gitcd element-tree-gridnpm install #or yarnnpm run dev -
use with node
- install
npm install element-tree-grid --save- in you project
//commonvar ElTreeGrid = ;Vue;
useage
-
common useage
-
get children from remote
- html
- javascript
el: "#app"data:model:menus: treesmethods:{// async or sync are both supported} -
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 cachetype: 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
- with formatter
- with scopedSolts
prefix => {{scope.row.label}} -- {{scope.row.id}} <= suffix