表格树，element-tree-grid需要单独下载并再配合elementUi里el-table使用。
步骤：1、npm install element-tree-grid --save（下载element-tree-grid）
2、在main.js里引用：import ElTreeGrid 'element-tree-grid'
Vue.component(ElTreeGrid.name,ElTreeGrid)
3、html代码（配合el-table使用）：
<el-table :data='data'>
<el-table-tree-column fixed (是否固定)
prop='属性 ' table='表头'
levelKey='层级（0,1,2,3代表第几层）'
parentKey='parentId（上一层级的ID,值与父层级的ID（treeKey）一致）’
treeKey='目前层级的ID，子层级的parentKey与其一致 '
:indentSize='没展开一个层级缩进的px'
child-key='子层级数据（数组形式）'>
</el-table-tree-column>
<el-table-column prop='' lable=''>
</el-table-column>
<el-table-column prop='' lable=''>
</el-table-column>
.....
</el-table>
4、data的结构：
data:[
{
levelKey:0,
parentKey:0,
treeKey:1,
child-key:[
{
levelKey:1,
parentKey:1,
treeKey:2,
child-key:[
levelKey:2,
parentKey:2,
treeKey:3,
....
]
}
]
},
{.....}
]
el-table 的属性方法都可正常使用
经验首页