blocks-tree是Vue 3组件，用于在应用程序中生成可折叠和可检查的组织树。

安装和下载：

# Yarn
$ yarn add vue3-blocks-tree

# NPM
$ npm i vue3-blocks-tree

使用

1.导入blocks-tree。

import {createApp} from 'vue';
import VueBlocksTree from 'vue3-blocks-tree';
import 'vue3-blocks-tree/dist/vue3-blocks-tree.css';
let defaultoptions = {
    // OPTIONS HERE
}
createApp(App).use(VueBlocksTree, defaultoptions)

2.创建一个基本的组织树。

<blocks-tree :data="treeData"></blocks-tree>

import { defineComponent,ref,reactive } from 'vue';
export default defineComponent({
  setup() {
    let selected = ref([]);
    let treeOrientation = ref("0");
    let treeData = reactive({
        label: 'root',
        expand: true,
        some_id: 1,
        children: [
          { label: 'child 1', some_id: 2, },
          { label: 'child 2', some_id: 3, },
          { 
            label: 'subparent 1', 
            some_id: 4, 
            expand: false, 
            children: [
              { label: 'subchild 1', some_id: 5 },
              {  
                label: 'subchild 2', 
                some_id: 6, 
                expand: false, 
                children: [
                  { label: 'subchild 11', some_id: 7 },
                  { label: 'subchild 22', some_id: 8 },
                ]
              },
            ]
          },
        ]
    });
    return {
      treeData,
    }
  }
})

3.可用的组件props。

data: {
  type: Object,
  required: true
},
props: {
  type: Object,
  default: () => (<PropsType>{
    label: 'label',
    expand: 'expand',
    children: 'children'
  })
},
horizontal: Boolean,
collapsable: Boolean,
renderContent: Function,
labelWidth: [String, Number],
labelClassName: [Function, String],

4. 事件.

• @node-click: 单击
• @node-mouseover: 将鼠标移入
• @node-mouseout: 将鼠标移除
• @node-expand: 展开节点

---

官网：https://github.com/megafetis/vue3-blocks-tree

演示：https://www.vue365.cn/code_demo.php?id=4507

GitHub下载：https://github.com/megafetis/vue3-blocks-tree/archive/refs/heads/master.zip