vue3 + ts 使用 el-tree

实现效果：

代码：

<template><!-- el-tree 使用 --><div class="my-tree-container"><el-scrollbar height="100%"><el-tree ref="treeRef" :data="treeData" node-key="id" @node-click="handleNodeClick" :props="treeProps":show-checkbox="true" :check-strictly="true" :default-expanded-keys="defaultExpandedKeys"@check-change="handleCheckChange"><template #default="{ node, data }"><span class="node-icon"><i class="iconfont" :class="data.icon"/></span><span :class="currentNodeKey === data.id ? 'active-node' : ''">{{ node.label }}</span></template></el-tree></el-scrollbar></div></template><script setup lang="ts">import {ref} from "vue";const treeProps = {id: 'id',label: 'label',children: 'children',disabled: 'disabled'
}const treeData: any[] = [{id: 1,label: 'Level one 1',icon: 'icon-houqinguanli',children: [{id: 11,label: 'Level two 1-1',children: [{id: 111,label: 'Level three 1-1-1',},],},],},{id: 2,label: 'Level one 2',icon: 'icon-caiwuguanli',children: [{id: 21,label: 'Level two 2-1',children: [{id: 211,label: 'Level three 2-1-1',},],},{id: 22,label: 'Level two 2-2',children: [{id: 221,label: 'Level three 2-2-1',},],},],},{id: 3,label: 'Level one 3',icon: 'icon-nenghaoqingkuang',children: [{id: 31,label: 'Level two 3-1',children: [{id: 311,label: 'Level three 3-1-1',},],},{id: 32,label: 'Level two 3-2',children: [{id: 321,label: 'Level three 3-2-1',},],},],},
] // 数据const currentNodeKey = ref<any>(null) // 当前点击的节点的 key【key具体为哪一个属性可通过 node-key 指定】const defaultExpandedKeys = [1, 2, 3] // 默认展开的节点的 keyconst treeRef = ref<any>(null)const handleNodeClick = (data: any, node: any) => { /* 节点点击事件 */currentNodeKey.value = data.id
}/* 节点勾选事件（当复选框被点击时触发）
* data: 当前点击的节点的数据
* isNodeChecked: 节点本身是否被选中
* hasChildrenChecked: 节点的子树中是否有被选中的节点
*  */
const handleCheckChange = (data: any, node: any, indeterminate: any) => {// console.log(data, node, indeterminate)const checkedNodes = treeRef.value.getCheckedNodes()console.log(checkedNodes, '被选中的节点')
}// 根据唯一 id 查找树节点
const findNodeById = (id: number, arr: any[]): any => {for (let item of arr) {if (item.id === id) {return item}if (item.children && item.children.length > 0) {const res = findNodeById(id, item.children)if (res) {return res}}}
}</script><style scoped lang="scss">.my-tree-container {position: absolute;top: 100px;left: 100px;height: 300px; /* tree height needed */width: 230px; /* needed */background: linear-gradient(180deg, rgba(26, 35, 48, 0.9) 0%, rgba(6, 13, 22, 0.9) 100%);opacity: 0.9;padding-bottom: 10px;.active-node { /* 选中的节点的样式 */color: #409EFF;background-color: transparent;}.node-icon {margin-right: 10px;}:deep(.el-tree) {background: none;color: rgba(206, 207, 209);font-size: 16px;margin-left: 10px;font-weight: lighter;font-family: "ResourceHanRoundedCN-Bold", "黑体", Arial, sans-serif;}:deep(.el-tree-node__content) { // node-heightheight: 35px;}:deep(.el-tree-node__expand-icon) { /* 隐藏可展开节点前面的箭头 */display: none;}:deep(.el-tree-node__content:hover) {background-color: transparent;color: #409EFF;}:deep(.el-tree-node:focus > .el-tree-node__content) { /* 解决点击一个节点后，鼠标移开，修改该节点背景色失效的问题 */background: none;}:deep(.el-icon) {font-size: 16px;}:deep(.el-tree-node) { /* 只有叶子节点显示勾选框 */.is-leaf + .el-checkbox {display: inline-flex;}.el-checkbox {display: none;}}}</style>