组织机构选择组件
组织机构选择组件主要对el-tree组件进行了简单封装,支持组织机构的异步加载,单选,多选等操作。
1、使用方法
组织机构使用时需要先import引用,之后就可以直接使用 waf-select-org ,传递相应的参数即可使用
<!-- 上传组件合用-->
<waf-select-org :pageParams="orgParams" @transOrgCallback="selOrgCallback"/>
// script 示例代码
import WafSelectOrg from '@/components/EmpOrg/SelectOrg'
data() {
return {
pageParams: { visible: false}
}
},
methods: {
// 设置visible,显示组织机构组件
selectOrg() {
this.pageParams.visible = true
},
// 选择组织机构后回调函数
selOrgCallback(org) {
this.pageParams.visible = false
console.info(org)
}
}
2、组件参数说明
组织机构选择组件自定义的一些属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| pageParams | 组件参数 | object | — | — |
| visible | 是否显示组件 | boolean | — | false |
| @transOrgCallback | 组件回调函数 | function(node) | — | — |
visible属于pageParams对象中的属性,目前只添加这一个自定义属性,完成的参数如下:
# 完成参数设置参照
pageParams: { visible: false}
如需要多选在组件上参照el-tree,添加show-checkbox属性在waf-select-org即可多选,多选返回的是checkedNodes的数据,再自行封装需要展现的格式。
3、示例访问
- 示例文件路径:无(参照系统管理--机构管理功能,如:
src/views/admin/components/SysOrgUnitEdit.vue) - 本地访问地址: http://localhost:8080/#/admin/sysOrgUnit
