vue 实现组织架构

Vue 实现组织架构的方法

在 Vue 中实现组织架构通常涉及树形结构的展示和交互，可以通过以下方法实现：

使用递归组件

递归组件适合展示嵌套层级的数据结构。定义一个组件，该组件内部可以调用自身来渲染子节点。

<template>
  <div>
    <div @click="toggle">{{ node.name }}</div>
    <div v-if="expanded && node.children">
      <tree-node
        v-for="child in node.children"
        :key="child.id"
        :node="child"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'TreeNode',
  props: {
    node: Object
  },
  data() {
    return {
      expanded: false
    };
  },
  methods: {
    toggle() {
      this.expanded = !this.expanded;
    }
  }
};
</script>

使用第三方库

一些第三方库如 vue-orgchart 或 element-ui 的 el-tree 可以快速实现组织架构功能。

安装 element-ui：

npm install element-ui

使用 el-tree：

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    @node-click="handleNodeClick"
  />
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          label: '一级部门',
          children: [
            {
              label: '二级部门',
              children: [
                { label: '三级部门' }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    }
  }
};
</script>

动态加载数据

对于大型组织架构，可以通过动态加载子节点数据来优化性能。

<template>
  <el-tree
    :load="loadNode"
    lazy
    :props="defaultProps"
  />
</template>

<script>
export default {
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'label',
        isLeaf: 'leaf'
      }
    };
  },
  methods: {
    loadNode(node, resolve) {
      if (node.level === 0) {
        // 加载根节点
        resolve([{ label: '根部门' }]);
      } else {
        // 模拟异步加载子节点
        setTimeout(() => {
          resolve([
            { label: '子部门1' },
            { label: '子部门2', leaf: true }
          ]);
        }, 500);
      }
    }
  }
};
</script>

自定义样式和交互

通过自定义节点内容和样式，可以实现更丰富的交互效果。

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    :render-content="renderContent"
  />
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          label: '部门A',
          children: [
            { label: '子部门A1' },
            { label: '子部门A2' }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    };
  },
  methods: {
    renderContent(h, { node, data }) {
      return h('span', { class: 'custom-node' }, [
        h('span', node.label),
        h('button', {
          on: {
            click: () => this.addNode(data)
          }
        }, '添加')
      ]);
    },
    addNode(data) {
      data.children = data.children || [];
      data.children.push({ label: '新部门' });
    }
  }
};
</script>

<style>
.custom-node {
  display: flex;
  align-items: center;
}
</style>

数据格式建议

组织架构数据通常为嵌套结构，例如：

{
  id: 1,
  name: '总公司',
  children: [
    {
      id: 2,
      name: '分公司A',
      children: []
    }
  ]
}

通过以上方法，可以灵活地在 Vue 中实现组织架构功能，并根据需求调整样式和交互逻辑。