在vue項目中使用element-tree-grid（表格樹）

Git Demo 網址 ： https://github.com/ProsperLee/element-tree-grid

相關技術貼：https://www.lagou.com/lgeduarticle/41612.html

 

一、使用方法：

1、通過npm安裝element-tree-grid

npm install element-tree-grid --save

2、在main.js中註冊element-tree-grid

var ElTreeGrid = require('element-tree-grid');
Vue.component(ElTreeGrid.name,ElTreeGrid);

 3、vue文件中的HTML部分：

<!-- tree table -->
        <el-table :data="firstLeveData" border >
            <el-table-column prop="icId" label="icId" type="selection" fixed></el-table-column>
            <el-table-tree-column fixed :expand-all="!1" :remote="remote" file-icon="icon icon-file" folder-icon="icon icon-folder" prop="icName" label="分類分級名稱"
                treeKey="icId" parentKey="icParentid">
            </el-table-tree-column>
        </el-table>

 4、js部分：

var _this;
export default {
    data(){
        return {
            tableTreeData:[],//table-tree所有數據
            firstLeveData:[],//過濾後的一級數據
        }
    },
    created() { 
        _this=this;
        _this.getParentIdData();
    },
    methods:{
        // 調接口，一次返回table-tree所有層級的數據。
        getParentIdData(parentId){
           infoClassific.getTreeData().then(res=>{
               if(res.code==0){
                    //保存所有層級的數據，之後remote過濾的時候會用到。
                    _this.tableTreeData = res.data;
                    //取過濾後得到的一級數據
                    _this.firstLeveData = _this.tableTreeData.filter(f => f['icParentid'] == "0") ;
                    /* 插件要求的數據格式，每層數據都要有depth(深度)，表示當前數據處於第幾層。
                       如果當前數據是一級菜單，depth=0;如果當前數據是二級菜單，depth=1。依次類推。
                       我這裏接口沒有返回depth，所以需要自己處理一下，增加depth。
                    */
                     _this.firstLeveData.forEach(function(ele){
                          ele.depth=0;
                     })
                }else{
                    _this.$message({
                        message: res.message,
                        type: 'error',
                        duration:1500,
                        showClose: true,
                    });
                }
            })
         },
         //獲取子級
         remote(row, callback) {
             var childNodes = _this.tableTreeData.filter(f => f['icParentid'] == row['icId']);
             //遍歷child，添加depth
             childNodes.forEach((node)=>{
                node.depth = row.depth + 1;
             })
             callback(childNodes);
         },
    }
}

 

二、踩過的坑

1、在getParentIdData()裏讓接口一次返回所有層級的數據，remote()裏不要請求接口，只用來過濾。否則remote會一直調接口直到頁面卡死。(remote()是element-tree-grid自帶的函數，當父節點的child_num>0時，點擊父節點可觸發，在remote()裏對所有層級的數據進行過濾，返回當前被點擊的父節點的子節點。)

2、一定要給 <el-table-tree-column> 標籤加treeKey和parentKey屬性：treeKey="icId" parentKey="icParentid"

否則數據會顯示錯亂，主要爲以下幾個問題：

（1）點擊父節點後加載出來的子節點無法顯示到相應的父節點下面，而是在數組 firstLeveData 的後面一直疊加，點擊一次父節點就在firstLeveData疊加一次數據，然後當前table-tree的數據越來越多；

（2）點擊父節點無法收起子節點的數據。

 3、最後傳給element-tree-grid的數據，每個層級要帶depth屬性。如果沒有這個屬性，雖然不會影響功能，子級菜單還是能加載出來，只是父級與子級之間就沒有縮進，所有層級的數據都靠最左側，看起來不直觀。

 

4、expand-all屬性設置：

:expand-all="!1"   默認收起子級菜單，只顯示一級菜單。

:expand-all="!!1"  默認顯示所有層級的菜單。