vue组织树（树形组件vue3)_vue-power-tree

vue-power-tree

内容列表

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

介绍

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

安装

# use npm
npm install vue-power-tree

# use yarn
yarn add vue-power-tree
1
2
3
4
5

使用

# 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"/>
1
2
3
4
5
6
7
8
9
10
11
12

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

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

1. 属性

2. Props

3. 方法

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

4. 事件

5. 插槽

相关仓库

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

维护者

@liuzepeng

其他

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