el-tree实现部分多选框禁用 + 自定义节点内容 + 最多只能选中一个复选框

        一个项目有很多接口，需要在前端开发一个接口管理界面，从来查看接口管理信息。结果图如下：

1. template部分代码

<el-tree 
	ref="tree" 	// 用于过滤 + 复选框节点选中
	:data="processedTreeData" 
	show-checkbox 
	node-key="id" 
	:props="defaultProps" //	用于配置树组件的属性映射
	check-strictly
	:filter-node-method="filterNode" 
	#default="{ node, data }" //	自定义树节点的显示内容
	@check="handleCheckChange"
	>
	<span>
		<span style="margin:0 0.5vh;">{{ node.label }}</span>
		<el-tag type="success" v-if="data.type === 'view'">视图</el-tag>
		<el-tag type="primary" v-if="data.type === 'catalog'">目录</el-tag>
	</span>
</el-tree>

2.data数据部分，用于字段属性映射 

defaultProps: {
	children: 'children',
	label: 'name',
	value: 'id'
},

 3.由于让目录级别的节点无法点击【计算属性处理数据，由于子节点也存在。所以需要递归遍历】

processedTreeData() {
	const processNode = (node) => {
		const isCatalog = node.type === 'catalog'
		return {
			...node,
			disabled: isCatalog,
			children: node.children ? node.children.map(processNode) : []
		}
	}
	return this.treeData.map(processNode)
}

4.methods中的方法 

// ========勾选状态变化监听========
handleCheckChange(currentNode) {
	const validKeys = this.$refs.tree.getCheckedKeys()	//	获取所有不是disabled状态的叶子节点
		.filter(key => {
			const node = this.$refs.tree.getNode(key)
			return !node.data.disabled
		})

	if (validKeys.length > 1) {	//	只选中当前节点
		this.$refs.tree.setCheckedKeys([currentNode.id])
		this.handleNodeClick(currentNode)
	}
},
// ========点击复选框的远程回调========
async handleNodeClick(data) {
	if (data.type === 'catalog') {
		this.$message.warning(' 请选择叶子节点');
		return;
	}

	const res = await getInterfaceByMenuId(data.id);
	if (res.success) {
		this.tableData = res.data;
	}
}