当前位置:网站首页>tki-tree 树组件控制默认展开第几层数据
tki-tree 树组件控制默认展开第几层数据
2022-08-09 18:53:00 【人间清醒小仙女】

有一个这样子的需求
tki-tree没有配置项控制展示到第几层数据,所以需要我们自己扩展
我在组件里扩展了两个配置项
1.openRank 控制展开到树的第几层
showAllFlod: {
// 是否展开所有节点
type: Boolean,
default: false
}
2.showAllFlod 全部展开
openRank: {
type: [Number, String],
}
然后处理方法中的数据
//扁平化树结构
_renderTreeList(list = [], rank = 0, parentId = [], parents = []) {
let openRank = this.openRank ? (rank < this.openRank) : false; // 如果这两个参数都没设置的话就全都收起来
let showRank = this.openRank ? (rank < this.openRank - 1) : false;// 如果设置了层级,那么需要让层级的上一级箭头是收起状态,否则需要通过点击触发的事件才能把数据展示出来
if (this.showAllFlod) {
openRank = showRank = true;
}
list.forEach(item => {
this.treeList.push({
id: item[this.idKey],
name: item[this.rangeKey],
source: item,
disabled: item.disabled,
parentId, // 父级id数组
parents, // 父级id数组
rank, // 层级
showChild: Boolean(showRank), //箭头怎么展示
open: Boolean(showRank), //是否打开
show: Boolean(openRank || rank === 0), // 自身是否显示
hideArr: [],
orChecked: item.checked ? item.checked : false,
checked: item.checked ? item.checked : false,
childNum: 0
})
if (Array.isArray(item.children) && item.children.length > 0) {
let parentid = [...parentId],
parentArr = [...parents];
delete parentArr.children
parentid.push(item[this.idKey]);
parentArr.push({
[this.idKey]: item[this.idKey],
[this.rangeKey]: item[this.rangeKey]
})
// lazy
if(!this.lazy) {
this._renderTreeList(item.children, rank + 1, parentid, parentArr)
}
} else {
this.treeList[this.treeList.length - 1].lastRank = true;
}
})
},
边栏推荐
猜你喜欢

2.3 监督学习-2

启动 CM agent 报错——ImportError: libssl.so.10: cannot open shared object file: No such file or directory

优秀的 Verilog/FPGA开源项目介绍(三十一)- OFDM

IDEA快捷代码实时模板

Codesys结构变量编程应用(STRUCT类型)

Abbkine TraKine Pro 活细胞微管染色试剂盒重要特色
![[免费专栏] Android安全之静态方式逆向APK应用浅析【手动注入smali+】+【IDA Pro静态分析so文件】+【IDA Pro基础使用讲解】](/img/05/61cf11d03cb3bd785bba1b12bc946e.png)
[免费专栏] Android安全之静态方式逆向APK应用浅析【手动注入smali+】+【IDA Pro静态分析so文件】+【IDA Pro基础使用讲解】

如何从800万数据中快速捞出自己想要的数据?
![[免费专栏] Android安全之Android工程模式](/img/9e/373a513dd3cd4681ff969432c9dfd5.png)
[免费专栏] Android安全之Android工程模式

源码编译安装与yum和rpm软件安装详解
随机推荐
毕昇编译器优化:Lazy Code Motion
软件测试技术之如何编写测试用例(6)
使用Mock技术模拟数据
Mysql table structure change scheme comparison and analysis
DP-Differential Privacy概念介绍
mysql duplicate data group multiple latest records
Open Source Summer | List Details Display Based on Ruoyi Architecture
大健康产业商业供应链管理系统数字化提升产业链运作效率推动供应链标准化建设
[免费专栏] Android安全之Android奇淫run-as命令
【IoT毕设】STM32与机智云自助开发平台的宠物智能喂养系统
mysql死锁的排查和解决
基于设计稿识别的可视化低代码系统实践
基于CC2530 E18-MS1-PCB Zigbee DIY作品
安装多版本php(php5.6,php7.2)
Flume (六) --------- Flume 数据流监控
21天学习挑战赛--第四天打卡(横竖屏切换)
2022深圳(软考中级)系统集成项目管理工程师报名
pat链表专题训练+搜索专题
【kali-权限提升】(4.2.6)社会工程学工具包(中):中间人攻击工具Ettercap
shell脚本编写 hash方法,shell中字符到ascii码或数字的转换