一、组件介绍
人员组件在各系统的应用都是比较广泛的，因此可以将其封装为可配置的人员组件，根据不同角色权限显示对应的人员供选择，代码目前只是一部分，需要源码的私聊。
二、直接上代码
use.vue 父组件
<div class="root-context">
<el-dialog
title="人员选择"
custom-class="dialog-custom-class"
draggable
v-model="dialogFormVisible"
append-to-body
>
<personSelection
ref="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-input
class="data-top-search"
placeholder="输入关键字进行过滤"
v-model="filterText"
clearable
>
<template #prepend>
<el-select
style="width: 120px"
v-model="selectType"
placeholder="请选择"
>
<el-option
v-for="(type, index) in showTypeList"
:label="type"
:value="type"
:key="index"
/>
</el-select>
</template>
</el-input>
<el-tree
class="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-tag
class="choose-tag"
v-for="tag in checkUserList"
:key="tag.id"
@close="removeChooseTag(tag)"
closable
>
{{ tag.text }}
</el-tag>
</div>
</div>
</div>
</div>
</template>树形数据可自行定义或调接口，需要注意数据结构！！！
