关于在vue3中vue3-tree-org的简单应用

效果图如下：

主要围绕：属性的使用方式、样式等问题来展示。

文档在这里：vue3-tree-org

<vue3-tree-org :data="treeData" center :horizontal="false" :toolBar="toolBar" @on-node-click="handleTreeNodeClick"><!-- 自定义节点内容 --><template v-slot="{ node }"><div v-if="node.$$data.id !== 1" :class="[chooseItem == node.$$data.id ? 'tree-org-node__text_choosed' : 'tree-org-node__text']"><img :src="[chooseItem == node.$$data.id ? node.$$data.iconChoosed : node.$$data.icon]" alt="" /><div style="margin-left: .5vw"><div style="font-size: .8vw">{{ node.label }}</div><div style="text-align: left;"><span style="font-weight: 600;font-size: 1vw">{{ node.$$data.pCount }}</span><span>人</span></div></div></div><div v-else class="tree-org-node__head"><img :src="node.$$data.icon" alt="" /><div style="margin-left: .5vw;font-size: .8vw">{{ node.label }}</div></div></template></vue3-tree-org>

我此处写的代码比较随意。样式都是一样编写，只不过是在使用属性时，要使用node.$$data.xxx的方式来使用。