**JSelectUserByDept部门用户选择组件** [TOC] ## 参数定义 | 参数 | 类型 | 是否可选|默认值 |说明| |------|------|----|-------|-------| | value|[String,Array] |否 | 无|回显值 | | showButton |Boolean|否 | true|是否显示选择按钮| | disabled |Boolean |否 |false| 是否禁用 | | rowKey |String | 否|username| 取值字段配置,一般为主键字段| | labelKey |String |否 |realname| 显示字段配置| | params?|Object|否 |无| 自定义查询参数| | modalTitle| String| 否 | 用户选择| 选择框标题| ## 事件定义 | 事件名 |说明| |------|------| | onChange|选中的值改变的时候触发 | ## 效果展示 ![](https://img.kancloud.cn/fe/79/fe797051b3e7a01b2d3094c280442e80_805x59.png) ![](https://img.kancloud.cn/34/60/3460b50a75f2daf24329999beb33364f_995x609.png) ## 使用示例 1.选择框在BaseForm中使用示例: ~~~ { field: 'user2', component: 'JSelectUserByDept', label: '部门选择用户', helpMessage: ['component模式'], componentProps:{ labelKey:'realname', rowKey:'username' } } ~~~ 2.选择框在插槽中使用示例 ~~~ <template #jSelectUser="{model, field }"> <JSelectUserByDept v-model:value="model[field]"/> </template> ~~~ 3.选择框单独使用示例 ~~~ <template> <a-button type="primary" preIcon="ant-design:plus-outlined" @click="openHandle">选择</a-button> <UserSelectByDepModal rowKey="id" @register="registerUserDeptModal" @getSelectResult="onSelectOk"/> </template> <script lang="ts" setup> import UserSelectByDepModal from '/@/components/Form/src/jeecg/components/modal/UserSelectByDepModal .vue' // 注册用户选择框 const [registerUserDeptModal, {openModal}] = useModal() // 打开用户选择框 function openHandle() { openModal(); } // 选择用户成功 function onSelectOk(selectRows, selectKeys) { //处理业务逻辑 } </script> ~~~