组织架构模块树形组件如何使用？ el-tree、插槽自定义树形组件结构

1. el-tree

el-tree是Element UI组件库中的一种树形组件，使用非常方便。只需要在Vue组件中引入el-tree组件，然后传入相应的数据即可。

首先需要安装Element UI，可以使用npm命令进行安装：

npm install element-ui --save

接着在Vue组件中引入el-tree组件：

<template>
  <el-tree :data="treeData"></el-tree>
</template>

<script>
import { Tree } from 'element-ui'

export default {
  components: {
    'el-tree': Tree
  },
  data() {
    return {
      treeData: [
        {
          label: 'Node1',
          children: [
            { label: 'Child1' },
            { label: 'Child2' }
          ]
        },
        {
          label: 'Node2'
        }
      ]
    }
  }
}
</script>

以上代码中，el-tree的data属性传入了一个树形数据结构，包含了两个节点Node1和Node2，Node1节点下有两个子节点Child1和Child2。

2. 自定义树形组件结构

如果想要自定义树形组件的结构，可以使用Vue的插槽（slot）功能。插槽可以让父组件传入子组件的内容，让子组件可以自定义渲染。

首先，在Vue组件中定义一个自定义树形组件，并在其中使用插槽：

<template>
  <ul>
    <li v-for="item in treeData" :key="item.id">
      <slot name="tree-node" :item="item">
        <div>{{ item.label }}</div>
      </slot>
      <ul v-if="item.children">
        <tree :tree-data="item.children"></tree>
      </ul>
    </li>
  </ul>
</template>

以上代码中，使用v-for循环渲染树形结构的每一个节点，使用插槽渲染节点的内容，插槽名为"tree-node"，插槽传入了一个item属性，值为当前节点的数据。如果没有传入插槽，则默认渲染节点的label属性。

接着，在使用该自定义组件的父组件中，可以使用template标签来定义插槽的内容：

<template>
  <my-tree :tree-data="treeData">
    <template v-slot:tree-node="{ item }">
      <div>
        <span>{{ item.label }}</span>
        <button @click="editNode(item)">Edit</button>
        <button @click="deleteNode(item)">Delete</button>
      </div>
    </template>
  </my-tree>
</template>

<script>
import MyTree from './MyTree.vue'

export default {
  components: {
    'my-tree': MyTree
  },
  data() {
    return {
      treeData: [
        {
          id: 1,
          label: 'Node1',
          children: [
            { id: 2, label: 'Child1' },
            { id: 3, label: 'Child2' }
          ]
        },
        {
          id: 4,
          label: 'Node2'
        }
      ]
    }
  },
  methods: {
    editNode(item) {
      console.log(`Edit node: ${item.label}`)
    },
    deleteNode(item) {
      console.log(`Delete node: ${item.label}`)
    }
  }
}
</script>

以上代码中，使用v-slot指令定义了一个名为"tree-node"的插槽，并在插槽中渲染了节点的内容，包括节点的label、编辑按钮和删除按钮。在父组件中使用自定义组件时，将插槽作为template标签的内容传入。在点击按钮时，可以调用父组件中的方法进行相应的操作。