vue下拉框显示部门和人员

在Vue中，你可以使用v-model指令来实现下拉框的双向绑定，然后使用v-for指令来遍历部门和人员列表。下面是一个简单的示例代码：

<template>
  <div>
    <label for="department">部门:</label>
    <select v-model="selectedDepartment" @change="onChangeDepartment">
      <option value="">请选择部门</option>
      <option v-for="department in departments" :value="department.id" :key="department.id">
        {{ department.name }}
      </option>
    </select>

    <label for="personnel">人员:</label>
    <select v-model="selectedPersonnel">
      <option value="">请选择人员</option>
      <option v-for="personnel in filteredPersonnel" :value="personnel.id" :key="personnel.id">
        {{ personnel.name }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      departments: [
        { id: 1, name: '部门A' },
        { id: 2, name: '部门B' },
        { id: 3, name: '部门C' }
      ],
      personnel: [
        { id: 1, name: '人员A', departmentId: 1 },
        { id: 2, name: '人员B', departmentId: 2 },
        { id: 3, name: '人员C', departmentId: 2 },
        { id: 4, name: '人员D', departmentId: 3 }
      ],
      selectedDepartment: '',
      selectedPersonnel: ''
    };
  },
  computed: {
    filteredPersonnel() {
      if (this.selectedDepartment === '') {
        return [];
      }
      return this.personnel.filter(person => person.departmentId === parseInt(this.selectedDepartment));
    }
  },
  methods: {
    onChangeDepartment() {
      this.selectedPersonnel = '';
    }
  }
};
</script>

在上述示例中，我们通过data属性来存储部门和人员的数据，使用v-model指令绑定了selectedDepartment和selectedPersonnel来实现双向绑定。通过使用v-for指令，我们遍历departments和filteredPersonnel数组来生成下拉框选项。在选择部门时，我们通过@change事件监听器来重置selectedPersonnel的值，以确保选择人员的下拉框被清空。

请注意，上述代码只是一个示例，你可以根据你的具体需求进行修改和扩展。