element ui 部门多选

Element UI是一款基于Vue.js的开源组件库，提供了丰富的UI组件，包括部门多选功能。

部门多选功能可以让用户在一个下拉菜单中选择多个部门。使用Element UI实现部门多选功能，可以按照以下步骤进行：

1. 在Vue组件中引入Element UI的Select和Option组件：

import { Select, Option } from 'element-ui';

2. 在data属性中定义部门列表和选中部门的数组：

data() {
  return {
    departments: [
      { value: 'dept1', label: '部门1' },
      { value: 'dept2', label: '部门2' },
      { value: 'dept3', label: '部门3' },
      // 其他部门...
    ],
    selectedDepartments: ['dept1', 'dept2'],  // 默认选中的部门
  }
},

3. 在模板中使用Select组件，并设置multiple属性为true，表示可以多选：

<el-select v-model="selectedDepartments" multiple>
  <el-option v-for="dept in departments" :key="dept.value" :label="dept.label" :value="dept.value"></el-option>
</el-select>

4. 完成上述步骤后，即可在页面中看到一个下拉菜单，用户可以通过点击选项来选择或取消选择部门。已选中的部门会显示在下拉菜单的输入框中。

通过以上步骤，就可以使用Element UI实现部门多选功能了。这个功能可以方便用户在多个选项中选择部门，使得界面交互更加友好和高效。