#yyds干货盘点 element-tree-grid（表格树）的使用

Posted 2022-04-22 清城幻影

写在前面：

element-tree-grid在使用的过程中是配合element-ui中的el-table使用。

步骤：

1. 下载

npm install element-tree-grid --save

2. 全局注册

下载好以后在main.js中引用：

import ElTreeGrid element-tree-grid
Vue.component(ElTreeGrid.name,ElTreeGrid)

3. 使用

html部分：

```html/xml
<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>

#### js部分：
```javascript
var _this;
export default 
    data()
        return 
            tableTreeData:[],//table-tree所有数据
            firstLeveData:[],//过滤后的一级数据
        
    ,
    created()  
        _this=this;
        _this.getParentIdData();
    ,
    methods:
        // 调接口，一次返回table-tree所有层级的数据。
        getParentIdData()
           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);
         ,
    

最后效果展示