Cascader 级联选择器只能选择人员（最后一级）

Cascader 级联选择器是一种常见的用户界面组件，广泛应用于选择树形结构数据。它可以帮助用户在多个级别中逐步选择数据，直到选择出最终的具体项。本文将着重于实现一个只能选择人员（最后一级）的级联选择器，使用 Vue.js 和 Element UI 来实现这个功能。

1. 组件介绍

Cascader 级联选择器的结构一般由多个层级组成，比如地区、部门和人员等。对于本案例，我们旨在实现只能选择人员的级联选择器，也就是说，当用户选择了某个部门后，接下来的只能选择该部门下的人员。

2. 数据准备

首先，我们需要准备好一个结构化的数据源，下面是一个简单的示例数据，包含部门和人员：

const options = [
  {
    value: 'department1',
    label: '部门 A',
    children: [
      {
        value: 'employee1',
        label: '员工 A1',
      },
      {
        value: 'employee2',
        label: '员工 A2',
      },
    ],
  },
  {
    value: 'department2',
    label: '部门 B',
    children: [
      {
        value: 'employee3',
        label: '员工 B1',
      },
      {
        value: 'employee4',
        label: '员工 B2',
      },
    ],
  },
];

3. 组件实现

在 Vue.js 组件中，我们可以使用 Element UI 的 Cascader 组件来实现级联选择器。以下是一个完整的 Vue 组件示例：

<template>
  <div>
    <el-cascader
      :options="options"
      :props="cascaderProps"
      @change="handleChange"
      placeholder="请选择人员"
    ></el-cascader>
    <div v-if="selectedPerson">
      选中的人员: {{ selectedPerson.label }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: 'department1',
          label: '部门 A',
          children: [
            {
              value: 'employee1',
              label: '员工 A1',
            },
            {
              value: 'employee2',
              label: '员工 A2',
            },
          ],
        },
        {
          value: 'department2',
          label: '部门 B',
          children: [
            {
              value: 'employee3',
              label: '员工 B1',
            },
            {
              value: 'employee4',
              label: '员工 B2',
            },
          ],
        },
      ],
      cascaderProps: {
        value: 'value',
        label: 'label',
        children: 'children',
      },
      selectedPerson: null,
    };
  },
  methods: {
    handleChange(value, selectedData) {
      if (selectedData.length === 1) {
        // 选择部门，不作处理
        this.selectedPerson = null;
      } else if (selectedData.length === 2) {
        // 选择人员，更新选中值
        this.selectedPerson = selectedData[1];
      }
    },
  },
};
</script>

<style>
/* 根据需要添加样式 */
</style>

4. 展示效果

在这个示例中，用户首先点击 Cascader 组件，选择一个部门。组件会显示该部门下可以选择的员工。当用户选择了员工后，handleChange 方法会被触发并更新显示的选中人员信息。

这种实现的好处是简单、直观，同时通过设置级联层级，使得用户在选择时有明确的路径。当用户选择一个部门时，不会立即得到员工选项，从而避免误操作。

5. 总结

Cascader 级联选择器为用户提供了一个清晰的选择路径，通过层层筛选来选择最终的目标项。在我们的案例中，通过细致的事件处理和数据设计，我们成功地将选择限制在最后一级的人员上。这样的设计不仅增强了应用程序的用户体验，同时提升了数据选择的准确性。希望这个示例能帮助你在实际项目中合理使用 Cascader 组件。