当前位置：首页 > article >正文

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

article 2025/1/23 0:49:17

效果图如下：

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

文档在这里：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的方式来使用。

查看全文

http://www.kler.cn/a/514206.html