说明
用于调起员工和部门信息的选择器,统一提供数据结构,方便开发中表单和交互实现示例
<van-button @click="show_dept_selector = true">显示选择器</van-button> <EmployeeSelector :employee_not_select="employee_not_select" :can_select_employee="true" :can_select_dept="true" :visible.sync="show_dept_selector" @confirm="move_confirm"/> import EmployeeSelector from '@/components/common/EmployeeSelector' export default { components: {EmployeeSelector}, data(){ return { employee_not_select: [], show_dept_selector: false } }, methods: { confirm(d){ console.log(d) }, }, }
属性
名称 | 类型 | 说明 | 默认值 |
---|---|---|---|
visible | bool | 是否显示 | false |
title | String | 导航栏标题 | 选择部门和员工 |
deptId | Number | 指定部门ID,人员列表就是该部门的 | 0 |
can_select_dept | Boolean | 指定是否能选择部门 | false |
dept_not_select | Array | 排除部门的ID,包含ID时不出现在选择列表中 | [] |
dept_multi | Boolean | 指定部门是否能多选 | true |
dept_children | Boolean | 选择部门时是否包含子部门 | true |
can_select_employee | Boolean | 指定是否能选择员工 | true |
employee_not_select | Array | 排除员工的ID,包含ID时不出现在选择列表中 | [] |
selected | Object | 已经选择的员工和部门 | {employee:[], dept: []} |
multi | Boolean | 指定员工是否能多选 | true |
user_employee_list | Boolean | 为true时,employee_list才生效 | false |
employee_list | Array | 指定显示的员工列表,注意:传值后组件的员工数据将不是统一向服务器获取的,而是指定的员工列表,格式是:[{id: 1, name: “张三”, img_url: “”}] | [] |
isChecKedAll | Boolean | 是否全选 | true |
close_clear_data | Boolean | 关闭时是否清除选择的数据 | true |
max | Number | 选择的人数限制 | 0 |
is_filtration_creator | Boolean | 是否去除创始人 | true |
is_manager_only | Boolean | 是否只显示管理者 | false |
include_self | Boolean | 是否显示自己 | true |
child | Boolean | 当人员列表点击部门筛选时不显示子部门人员 ,目前只在设置主管有使用到 | true |
isRequired | Boolean | 是否必须选择人员或者部门 | false |
- 事件
名称 | 说明 | 参数 |
---|---|---|
confirm | 当用户选择完成,点击确定时触发 | {employee:[], dept: []} |
文档更新时间: 2021-05-11 17:45 作者:郭家裕