一、组件介绍
       

     人员组件在各系统的应用都是比较广泛的，因此可以将其封装为可配置的人员组件，根据不同角色权限显示对应的人员供选择，代码目前只是一部分，需要源码的私聊。

二、直接上代码

use.vue 父组件

  <div class="root-context"><el-dialogtitle="人员选择"custom-class="dialog-custom-class"draggablev-model="dialogFormVisible"append-to-body><personSelectionref="userChoose"v-if="dialogFormVisible"v-bind="getBindValues":userIds="props.modelValue"@onChooseChange="onChooseChange":userList="userList"/><div slot="footer" class="el-dialog__footer flex justify-end"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="onConfirm()">确 定</el-button></div></el-dialog>

personSelection.vue  （子组件）

<template><div class="home_div"><div class="content"><div class="data-warp"><el-inputclass="data-top-search"placeholder="输入关键字进行过滤"v-model="filterText"clearable><template #prepend><el-selectstyle="width: 120px"v-model="selectType"placeholder="请选择"><el-optionv-for="(type, index) in showTypeList":label="type":value="type":key="index"/></el-select></template></el-input><el-treeclass="data-list":data="treeData"show-checkbox:default-expanded-keys="defaultExpandedKeys":default-checked-keys="defaultCheckedKeys"node-key="nodeId"ref="tree":expand-on-click-node="false":check-on-click-node="true":render-after-expand="false"empty-text="暂无数据"highlight-current@check-change="handleNodeCheckChange":filter-node-method="filterNode":props="{children: 'children',label: 'text'}"/></div><div class="choose-warp"><div class="choose-top"><span>已选{{ checkUserList.length }}人</span><el-button type="danger" @click="clearChoose()">清空</el-button></div><div class="choose-list"><el-tagclass="choose-tag"v-for="tag in checkUserList":key="tag.id"@close="removeChooseTag(tag)"closable>{{ tag.text }}</el-tag></div></div></div></div>
</template>

树形数据可自行定义或调接口，需要注意数据结构！！！

三、效果展示