vue点击按钮出现弹窗呈现部门及人员树状结构,点击后选择

在Vue.js中，你可以通过以下几个步骤创建一个点击按钮后显示部门和人员树形结构并允许用户选择的功能：

1. **组件设计**:
- 创建一个`DepartmentTree`组件，它负责渲染部门和人员的数据结构，可以是一个递归组件，展示每个部门及其下级。

<template>
  <div>
    <ul v-for="(department, index) in departments" :key="index">
      <li @click="selectDepartment(department)">
        {{ department.name }}
        <DepartmentTree :data="department.children" />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['data'],
  methods: {
    selectDepartment(department) {
      this.$emit('departmentSelected', department);
    }
  }
}
</script>

2. **父组件处理**:
- 在父组件中导入`DepartmentTree`，并设置一个方法来显示弹窗或执行其他操作。当点击部门时，会触发`departmentSelected`事件传递选中的部门数据。

<template>
  <button @click="showDepartmentPicker">查看部门</button>
  <DepartmentTree :data="departments" @departmentSelected="handleDepartmentSelection"></DepartmentTree>
</template>

<script>
import DepartmentTree from './DepartmentTree.vue';

export default {
  components: { DepartmentTree },
  data() {
    return {
      departments: [],
    };
  },
  methods: {
    showDepartmentPicker() {
      this.departmentPickerModal.show();
    },
    handleDepartmentSelection(selectedDepartment) {
      // 在这里处理用户的选择，比如关闭弹窗、记录选择等
    },
  },
};
</script>

3. **弹窗组件** (如果需要的话，可以是一个独立的Vue组件)：
- 创建一个`DepartmentPickerModal`组件，用于展示部门列表，并提供一个确认或取消按钮供用户选择。

<template>
  <v-dialog persistent>
    <v-list>
      <!-- 根据需要遍历显示部门列表 -->
      <v-list-item v-for="department in selectedDepartments" @click="selectDepartment(department)" :key="department.id">
        <v-list-item-title>{{ department.name }}</v-list-item-title>
      </v-list-item>
      <v-list-divider></v-list-divider>
      <v-list-item>
        <v-list-item-action @click="closePicker">
          <v-icon>mdi-close</v-icon>
        </v-list-item-action>
        <v-list-item-content>
          <v-list-item-title>Select Department</v-list-item-title>
        </v-list-item-content>
      </v-list-item>
    </v-list>
  </v-dialog>
</template>