element-tree-grid（表格树）的使用

表格树，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 的属性方法都可正常使用

转载于:https://www.cnblogs.com/han77/p/10411206.html