[JavaScript知识库]vue组织树（树形组件vue3)

vue-power-tree

内容列表

• 介绍
• 安装
• 使用
• 相关仓库
• 维护者

介绍

本插件在element-plus树形组件基础上，进行了二次封装。适用于vue3项目，在具备了element-plus 的Tree组件的所有功能的基础上，又增加了组织树展示效果，并同时支持拖拽，及自定义组织树的展开收起样式

安装

# use npm
npm install vue-power-tree

# use yarn
yarn add vue-power-tree

使用

# vue全局引用
import { createApp } from "vue"
import App from "./App.vue"
import VuePowerTree from "vue-power-tree"
import "vue-power-tree/dist/style.css"
const app = createApp(App)
app.use(VuePowerTree)
# 局部引用
import VuePowerTree from "vue-power-tree"
import "vue-power-tree/dist/style.css"

<vue-power-tree :data="data"/>

vue中使用示例

<template>
  <vue-power-tree :data="data" :props="defaultProps" draggable show-checkbox tree-type="org"
    @node-click="handleNodeClick" default-expand-all>
    <!-- 自定义展开收起样式 -->
    <template v-slot:icon-node="slotProps">
      <div v-if="slotProps.node.expanded" class="minus">
        -</div>
      <div v-else class="plus">
        +
      </div>
    </template>
  </vue-power-tree>
</template>

<script lang="ts" setup>
import VuePowerTree from "vue-power-tree"
import "vue-power-tree/dist/style.css"

interface Tree {
  label: string
  children?: Tree[]
}

const handleNodeClick = (data: Tree) => {
}

const data: Tree[] = [
  {
    id: 0,
    label: '主活动',
    children: [
      {
        id: 2,
        label: '子活动1',
        children: [
          {
            id: 5,
            label: '客群规则1'
          },
          {
            id: 6,
            label: '客群规则2'
          }

        ]
      },
      {
        id: 3,
        label: '子活动2',
        children: [
          {
            id: 7,
            label: '客群规则3'
          },
          {
            id: 8,
            label: '客群规则4'
          }
        ]
      },
      {
        id: 4,
        label: '子活动3'
      },
      {
        id: 9,
        label: '子活动4'
      }
    ]
  }
]

const defaultProps = {
  children: 'children',
  label: 'label',
}
</script>

<style>
.minus,
.plus {
  border: 1px solid red;
  background: #fff;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

本插件支持所有的element-plus的Tree组件功能，可参照，同时扩展了 tree-type属性 控制树形显示

1. 属性

2. Props

3. 方法

Tree 组件有以下方法，均返回当前选中的节点数组

4. 事件

5. 插槽

相关仓库

• element-plus-tree - 饿了么Tree组件
• vue-power-tree

维护者

@liuzepeng

其他

欢迎访问github，star一下
也欢迎提出issue，作者会及时完善，感谢