Vue.js递归组件实现组织架构树和选人功能

下面是关于 Vue.js 递归组件实现组织架构树和选人功能的完整攻略。

什么是 Vue.js 递归组件

Vue.js 的递归组件是指在组件的模板中可以调用组件自身的一种特殊组件。通过使用递归组件，可以在联动结构中轻松地构建无限级别的嵌套组件和树形结构。

实现组织架构树和选人功能的步骤

数据结构的设计

组织架构树通常是按照树形结构设计的，所以在 Vue.js 中的数据结构也需要按照这种方式来组织，可以使用对象和数组进行组合。

假设一个公司的组织架构如下：

公司
├── 董事会
├── 行政部
│   ├── 人力资源部
│   └── 行政管理部
├── 营销部
└── 生产部
    ├── 研发部
    └── 工程部

可以使用以下方式来组织数据结构：

{
  name: '公司',
  children: [
    {
      name: '董事会',
      children: []
    },
    {
      name: '行政部',
      children: [
        {
          name: '人力资源部',
          children: []
        },
        {
          name: '行政管理部',
          children: []
        }
      ]
    },
    {
      name: '营销部',
      children: []
    },
    {
      name: '生产部',
      children: [
        {
          name: '研发部',
          children: []
        },
        {
          name: '工程部',
          children: []
        }
      ]
    }
  ]
}

递归组件的使用

在 Vue.js 中，可以通过递归组件来创建树形结构。递归组件通过在组件模板中调用自身组件来实现无限级别的嵌套。

具体的操作步骤如下：

首先，在组件中注册当前组件的名称：

Vue.component('tree', {
  // ...
})

然后，在模板中使用该组件，并在其中通过 v-if 判断 children 是否有子节点，若有，则递归渲染，否则表示该节点为叶子节点，直接显示名称：

<template>
  <ul>
    <li>
      {{ node.name }}
      <ul v-if="node.children && node.children.length > 0">
        <tree v-for="child in node.children" :node="child" :key="child.name"></tree>
      </ul>
    </li>
  </ul>
</template>

以上代码中，使用 v-if 判断 node.children 是否存在，并且该数组的长度是否大于 0，如果条件成立，则递归调用该组件并传递子节点的数据。

选人功能的实现

在组织架构树的基础上，还可以增加选人功能。选人功能通常包括两个部分：

点击组织架构树中的某个节点，可以选择该节点下的所有人员；
点击确定按钮，可以将所选人员返回给父组件。

可以通过监听点击事件和触发自定义事件来实现选人功能。具体的实现步骤如下：

首先，在组件中声明一个 selected 变量，用于存放选择的人员：

data() {
  return {
    selected: []
  }
}

然后，对树形结构中的每个节点使用 v-bind 指令来绑定 click 事件，同时，在事件处理函数中，触发自定义事件并将节点的数据传递给父组件：

<template>
  <ul>
    <li v-bind:class="{ selected: selected.includes(node) }" v-on:click="handleClick">
      {{ node.name }}
      <ul v-if="node.children && node.children.length > 0">
        <tree v-for="child in node.children" :node="child" :key="child.name" v-on:select="handleSelect"></tree>
      </ul>
    </li>
  </ul>
</template>

其中，selected.includes(node) 用于判断当前节点是否已被选中，如果已选中则加上 selected 类，否则不加。

接着，在 handleSelect 方法中，对 selected 数组进行操作，将选中的节点存储到 selected 中：

methods: {
  handleClick() {
    this.$emit('select', this.node);
  },
  handleSelect(node) {
    this.selected.push(node);
  }
}

最后，在父组件中调用该组件时，监听自定义事件 select，获取选中的节点数据并将其保存到父组件中：

<template>
  <tree :node="data" v-on:select="handleSelect"></tree>
</template>

<script>
  export default {
    data() {
      return {
        data: {...},  // 组织架构树的数据结构
        selected: []  // 保存选中的节点数据
      }
    },
    methods: {
      handleSelect(node) {
        this.selected.push(node);
      }
    }
  }
</script>

示例说明

示例一：实现组织架构树

下面是一个简单的实例，演示了如何使用递归组件实现组织架构树：

<template>
  <div>
    <tree :node="data"></tree>
  </div>
</template>

<script>
  Vue.component('tree', {
    props: ['node'],
    template: `
      <ul>
        <li>{{ node.name }}</li>
        <ul v-if="node.children && node.children.length > 0">
          <tree v-for="child in node.children" :node="child" :key="child.name"></tree>
        </ul>
      </ul>
    `
  });

  export default {
    data() {
      return {
        data: {
          name: '公司',
          children: [
            {
              name: '董事会',
              children: []
            },
            {
              name: '行政部',
              children: [
                {
                  name: '人力资源部',
                  children: []
                },
                {
                  name: '行政管理部',
                  children: []
                }
              ]
            },
            {
              name: '营销部',
              children: []
            },
            {
              name: '生产部',
              children: [
                {
                  name: '研发部',
                  children: []
                },
                {
                  name: '工程部',
                  children: []
                }
              ]
            }
          ]
        }
      }
    }
  }
</script>

示例二：实现组织架构树和选人功能

下面是一个复杂一些的实例，演示了如何实现组织架构树和选人功能：

<template>
  <div>
    <button v-on:click="handleOk">确定</button>
    <tree :node="data" v-on:select="handleSelect"></tree>
  </div>
</template>

<script>
  Vue.component('tree', {
    props: ['node'],
    data() {
      return {
        selected: []
      }
    },
    template: `
      <ul>
        <li v-bind:class="{ selected: selected.includes(node) }" v-on:click="handleClick">
          {{ node.name }}
          <ul v-if="node.children && node.children.length > 0">
            <tree v-for="child in node.children" :node="child" :key="child.name" v-on:select="handleSelect"></tree>
          </ul>
        </li>
      </ul>
    `,
    methods: {
      handleClick() {
        this.$emit('select', this.node);
      },
      handleSelect(node) {
        this.selected.push(node);
      }
    }
  });

  export default {
    data() {
      return {
        data: {
          name: '公司',
          children: [
            {
              name: '董事会',
              children: []
            },
            {
              name: '行政部',
              children: [
                {
                  name: '人力资源部',
                  children: [
                    { name: '张三' },
                    { name: '李四' }
                  ]
                },
                {
                  name: '行政管理部',
                  children: [
                    { name: '王五' },
                    { name: '赵六' }
                  ]
                }
              ]
            },
            {
              name: '营销部',
              children: [
                { name: '宋江' },
                { name: '吴用' }
              ]
            },
            {
              name: '生产部',
              children: [
                {
                  name: '研发部',
                  children: [
                    { name: '小明' }
                  ]
                },
                {
                  name: '工程部',
                  children: [
                    { name: '小红' }
                  ]
                }
              ]
            }
          ]
        },
        selected: []
      }
    },
    methods: {
      handleSelect(node) {
        if (node.children && node.children.length > 0) {
          return;
        }
        this.selected.push(node);
      },
      handleOk() {
        console.log(this.selected);  // 打印选中的人员信息
      }
    }
  }
</script>

在这个例子中，首先定义了一个 selected 数组来保存选中的人员信息。然后，对 tree 组件中的每个节点绑定 click 事件，并触发 select 自定义事件，将节点数据传递给父组件。

在父组件中，监听 select 自定义事件，如果选择的是叶子节点（即选中的是人员），则将节点数据保存到 selected 数组中。当点击确定按钮时，打印选中的人员信息。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Vue.js递归组件实现组织架构树和选人功能 - Python技术站