Vue3人员选择组件封装

一、组件介绍

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

二、直接上代码

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>

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

三、效果展示