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 的屬性方法都可正常使用