vue项目中使用el-tree — 回显问题

最近实现了一个项目需求，关于权限的处理，见下图

 一级菜单包含多个二级菜单

        若二级不全选，则一级显示 半选 状态

        若二级全选中，则一级显示 全选 状态

在下次进入编辑页面时，需要将当前选中租户的权限回显出来

说明：二级下面会有多个三级菜单，以此类推

后端返回数据格式如下 :

 

整体思路很简单：初始化树 -> 处理 el-tree 回显 -> 递归处理所有层级菜单选中的id

// 初始化树
getMenu() {
	get('/api/document/getSingleCatalogListByTenant', {
		tenantId: this.currentRowId,
	}).then((res) => {
        this.handleDisplay(res.Data)
	})
},


// 处理tree回显
handleDisplay(val) {
	// 先显示出树，才能获取到所有节点
	val.length > 0 ? (this.treeList = val) : (this.treeList = [])

	// 已勾选id - 调用递归方法进行处理
	var checkedKeyArray = []
	val ? this.getCheckedId(val, checkedKeyArray) : ''

	this.$nextTick(() => {
		checkedKeyArray.forEach((item) => {
			if (this.$refs.oparateTree) {
                // 选中树，获取到树的节点，如果存在isLeaf，则设置回显
				var node = this.$refs.oparateTree.getNode(item)
				if (node.isLeaf) {
					this.$refs.oparateTree.setChecked(node, true)
				}
			}
		})
	})
},

// 递归处理 - 所有层级中选中的菜单id - 此处 is_related 为1时表示该租户拥有该菜单的权限
getCheckedId(val, checkedKeyArray) {
	val.forEach((item) => {
		if (item.is_related === '1') {
			checkedKeyArray.push(item.id)
		}
		if (item.children && item.children.length > 0) {
			this.getCheckedId(item.children, checkedKeyArray)
		}
	})
},

el-tree的使用 :

<el-tree
	node-key="id"
	:data="treeList"
	:show-checkbox="showCheckbox"
	ref="oparateTree"
>
</el-tree>

核心代码 :

var node = this.$refs.oparateTree.getNode(item)
if (node.isLeaf) {
    this.$refs.oparateTree.setChecked(node, true)
}

官网描述如下 :