- 说明
用于调起员工和部门信息的选择器,统一提供数据结构,方便开发中表单和交互实现
- 示例
<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)
},
},
}
- 属性
名称 | 类型 | 说明 | 默认值 |
---|---|---|---|
can_select_employee | bool | 指定是否能选择员工 | true |
can_select_dept | bool | 指定是否能选择部门 | true |
employee_not_select | array | 排除员工的ID,包含ID时不出现在选择列表中 | [] |
dept_not_select | array | 排除部门的ID,包含ID时不出现在选择列表中 | [] |
selected | json | 已经选择的员工和部门 | {employee:[], dept: []} |
multi | bool | 指定员工是否能多选 | true |
dept_multi | bool | 指定部门是否能多选 | true |
visible | bool | 是否显示 | false |
employee_list | array | 指定显示的员工列表,注意:传值后组件的员工数据将不是统一向服务器获取的,而是指定的员工列表,格式是:[{id: 1, name: “张三”, img_url: “”}] | [] |
close_clear_data | bool | 关闭时是否清空选择的数据 | true |
max | int | 当multi为true时,用来限制选择人数,0不生效 | 0 |
title | string | 导航栏标题 | 空 |
isChecKedAll | bool | 是否展示全选 | false |
whether_to_remove_right | bool | 清除-右边选中人员列表当中的左边没有的人(一般用于关联其他选人组件的,比如-考勤组–不参与人员)(一般不用,为优化选人组件新增字段) | false |
- 事件
名称 | 说明 | 参数 |
---|---|---|
confirm | 当用户选择完成,点击确定时触发 | {employee:[], dept: []} |
文档更新时间: 2020-12-17 11:45 作者:吴俊源