历览千载书,时时见遗烈。这篇文章主要讲述#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(表格树)的使用】
文章图片
推荐阅读
- Spark SQL底层执行流程详解
- MOS管和IGBT有什么区别(别傻傻分不清了)
- C语言-细说函数与结构体
- k8s中nginx+tomcat实现动静分离
- C语言程序的环境,编译+链接
- ENSP三层交换机连接二层交换机及路由器的做法
- 微信小游戏开发实战7:图形的数据验证
- RENIX软件RTSM基本操作_Linux——网络测试仪实操
- Shell 的sed和awk 工具