基于Vue制作组织架构树组件

1. 什么是组织架构树组件？
   组织架构树组件是一种常见的前端组件，用于显示企业或组织机构的人员层级关系，可以让用户清晰地了解整个组织的人员关系、职位层级等信息。

2. Vue是什么？
   Vue是一款轻量级的JavaScript框架，被广泛用于开发Web应用程序。Vue具有极高的灵活性和可定制性，允许开发人员轻松构建复杂的Web组件并实现数据双向绑定和响应式UI设计。

3. 制作组织架构树组件的步骤：
   （1）定义数据结构。组织架构树组件需要根据企业、部门、职位等层次结构显示人员层级关系，因此需要定义相应的数据结构来支持这一层次结构。例如：

const orgData = {
  id: 1,
  name: 'XYZ企业',
  children: [
    {
      id: 11,
      name: '技术部',
      children: [
        {
          id: 111,
          name: '开发组',
          children: [
            {
              id: 1111,
              name: '张三'
            },
            {
              id: 1112,
              name: '李四'
            }
          ]
        },
        {
          id: 112,
          name: '测试组',
          children: [
            {
              id: 1121,
              name: '王五'
            },
            {
              id: 1122,
              name: '赵六'
            }
          ]
        }
      ]
    },
    {
      id: 12,
      name: '销售部',
      children: [
        {
          id: 121,
          name: '北区',
          children: [
            {
              id: 1211,
              name: '张三'
            },
            {
              id: 1212,
              name: '李四'
            }
          ]
        },
        {
          id: 122,
          name: '南区',
          children: [
            {
              id: 1221,
              name: '王五'
            },
            {
              id: 1222,
              name: '赵六'
            }
          ]
        }
      ]
    }
  ]
};

（2）设计组件结构。组织架构树组件一般由多个嵌套的层次结构组成，所以需要在Vue组件中设计相应的HTML模板来支持这种结构。例如：

<template>
  <div class="org-tree">
    <ul>
      <li v-for="dept in orgData">
        {{ dept.name }}
        <ul>
          <li v-for="group in dept.children">
            {{ group.name }}
            <ul>
              <li v-for="person in group.children">
                {{ person.name }}
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

（3）处理数据和实现逻辑。在Vue组件中，可以通过computed属性或watch监听器来实现数据和逻辑的处理。例如，下面的代码实现了对orgData中的ID进行自动编号的处理：

computed: {
  orgData: function () {
    let lastId = 0; //最后一个ID号
    let colData = function (org) {
      org.id = ++lastId; //自动编号
      if (org.children) {
        org.children.forEach(function (depts) {
          colData(depts);
        });
      }
      return org;
    };
    return colData(this.originalData);
  }
}

1. 示例说明
   （1）示例一：基本的组织架构树组件
   下面的代码实现了一个基本的组织架构树组件。该组件通过动态绑定的方式显示了orgData数据中的组织架构树结构。

<template>
  <div>
    <h2>组织架构树</h2>
    <div class="org-tree">
      <ul>
        <li v-for="dept in orgData">
          {{ dept.name }}
          <ul>
            <li v-for="group in dept.children">
              {{ group.name }}
              <ul>
                <li v-for="person in group.children">
                  {{ person.name }}
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'OrgTree',
  props: ['orgData'],
};
</script>

（2）示例二：实现搜索功能的组织架构树组件
下面的代码实现了一个带有搜索功能的组织架构树组件，用户可以通过键入搜索关键字来快速定位所需的人员。该组件通过使用Vue的计算属性来动态筛选符合搜索条件的数据。

<template>
  <div>
    <h2>组织架构树</h2>
    <div class="search-bar">
      <input type="text" v-model="searchText" placeholder="请输入搜索关键字" />
      <button @click="search">搜索</button>
    </div>
    <div class="org-tree">
      <ul>
        <li v-for="dept in filteredData">
          {{ dept.name }}
          <ul>
            <li v-for="group in dept.children">
              {{ group.name }}
              <ul>
                <li v-for="person in group.children">
                  {{ person.name }}
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'OrgTree',
  props: ['orgData'],
  data() {
    return {
      searchText: '',
    };
  },
  computed: {
    filteredData() {
      let self = this;
      let result = [];
      let colData = function (org) {
        let isMatched = false;
        if (org.name.indexOf(self.searchText) !== -1) {
          isMatched = true;
        }
        if (org.children) {
          let children = [];
          org.children.forEach(function (depts) {
            let subData = colData(depts);
            if (subData) {
              children.push(subData);
              isMatched = true;
            }
          });
          if (isMatched) {
            org.children = children;
            result.push(org);
          }
        } else if (isMatched) {
          result.push(org);
        }
        return isMatched ? org : null;
      };
      if (self.searchText) {
        this.orgData.forEach(function (depts) {
          colData(depts);
        });
        return result;
      } else {
        return self.orgData;
      }
    },
  },
  methods: {
    search() {
      this.$forceUpdate();
    },
  },
};
</script>