vue element 选部门选人

您好！要在Vue Element中实现选部门和选人的功能，可以使用Element UI提供的组件来实现。您可以使用`el-cascader`组件来实现级联选择部门的功能，然后再使用`el-select`组件来实现选择人员的功能。

首先，您需要准备好部门和人员的数据源。可以使用一个数组来表示部门和人员的层级关系，例如：

const departmentOptions = [
  {
    value: '1',
    label: '部门1',
    children: [
      {
        value: '1-1',
        label: '部门1-1',
        children: [
          { value: '1-1-1', label: '人员1-1-1' },
          { value: '1-1-2', label: '人员1-1-2' }
        ]
      },
      {
        value: '1-2',
        label: '部门1-2',
        children: [
          { value: '1-2-1', label: '人员1-2-1' },
          { value: '1-2-2', label: '人员1-2-2' }
        ]
      }
    ]
  },
  // 其他部门...
];

接下来，在Vue组件中使用`el-cascader`和`el-select`来渲染选择部门和人员的功能。

<template>
  <div>
    <el-cascader
      v-model="selectedDepartment"
      :options="departmentOptions"
      @change="handleDepartmentChange"
      placeholder="请选择部门"
    ></el-cascader>
    <el-select
      v-model="selectedPerson"
      :options="personOptions"
      placeholder="请选择人员"
    ></el-select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedDepartment: [],
      selectedPerson: '',
      departmentOptions: [...], // 部门数据源
      personOptions: [] // 人员数据源
    };
  },
  methods: {
    handleDepartmentChange(value) {
      // 根据选中的部门更新人员数据源
      const department = this.findDepartment(value);
      this.personOptions = department ? department.children : [];
      this.selectedPerson = ''; // 清空选中的人员
    },
    findDepartment(value) {
      // 根据部门value找到对应的部门对象
      // 可以使用递归遍历departmentOptions数组来实现
    }
  }
};
</script>

在上面的示例代码中，`el-cascader`组件用于渲染部门选择，当部门选择变化时，通过`@change`事件触发`handleDepartmentChange`方法来更新人员数据源`personOptions`。然后使用`el-select`组件来渲染人员选择。

在`handleDepartmentChange`方法中，您可以根据选中的部门value值来查找对应的部门对象，可以使用递归遍历`departmentOptions`数组来实现。

希望可以帮到您！如果有任何问题，请随时提问。