tki-tree 树组件控制默认展开第几层数据

25 篇文章 0 订阅
15 篇文章 0 订阅

在这里插入图片描述
有一个这样子的需求
在这里插入图片描述

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;
		}
	})
},
  • 5
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 14
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 14
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

人间清醒小仙女

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值