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

历览千载书，时时见遗烈。这篇文章主要讲述#yyds干货盘点element-tree-grid（表格树）的使用相关的知识，希望能为你提供帮助。
写在前面：

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=https://www.songbingjia.com/android/" 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 = https://www.songbingjia.com/android/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); ,

最后效果展示【#yyds干货盘点element-tree-grid（表格树）的使用】