tree grid extends element
ui with vue
- 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.git cd element-tree-grid npm install #or yarn npm run dev
-
use with node
- install
npm install element-tree-grid --save
- in you project
//common var ElTreeGrid = require('element-tree-grid'); Vue.component(ElTreeGrid.name,ElTreeGrid);
useage
-
common useage
<el-table :data="model.menus" border max-height="250"> <el-table-tree-column file-icon="icon icon-file" folder-icon="icon icon-folder" prop="label" label="labelname" width="220"></el-table-tree-column> <el-table-column prop="description" label="description" width="180"></el-table-column> </el-table>
-
get children from remote
- html
<div id="app" style="padding: 30px;"> <el-table :data="model.menus" border max-height="400"> <el-table-tree-column :remote="remote" file-icon="icon icon-file" folder-icon="icon icon-folder" prop="label" label="MenuName" width="320"></el-table-tree-column> <el-table-column prop="id" label="id" width="180"></el-table-column> <el-table-column prop="description" label="Description" :show-overflow-tooltip="true" width="180"></el-table-column> </el-table> </div>
- 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 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
<el-table-tree-column
file-icon="icon icon-file"
folder-icon="icon icon-folder"
prop="label"
label="labelname"
width="220"></el-table-tree-column>
- with formatter
<el-table-tree-column
file-icon="icon icon-file"
folder-icon="icon icon-folder"
prop="label"
label="labelname"
:formatter="formatter"
width="220"></el-table-tree-column>
- with scopedSolts
<el-table-tree-column
file-icon="icon icon-file"
folder-icon="icon icon-folder"
prop="label"
label="labelname"
width="220">
<template slot-scope="scope">
<span>prefix =></span>
<span>{{scope.row.label}} -- {{scope.row.id}}</span>
<span><= suffix</span>
</template>
</el-table-tree-column>