Vue3人员选择组件封装

一、组件介绍

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

二、直接上代码

use.vue 父组件

javascript 复制代码
  <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 (子组件)

javascript 复制代码
<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>

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

三、效果展示
相关推荐
幼儿园技术家4 分钟前
Uniapp简易使用canvas绘制分享海报
前端
开开心心就好1 小时前
免费PDF处理软件,支持多种操作
运维·服务器·前端·spring boot·智能手机·pdf·电脑
全宝1 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css
yanlele1 小时前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试
妮妮喔妮2 小时前
【无标题】
开发语言·前端·javascript
fie88892 小时前
浅谈几种js设计模式
开发语言·javascript·设计模式
谦行2 小时前
深度神经网络训练过程与常见概念
前端
Simon_He2 小时前
一个免费的在线压缩网站超越了付费的压缩软件
前端·开源·图片资源
巴巴_羊3 小时前
React Ref使用
前端·javascript·react.js
拾光拾趣录3 小时前
CSS常见问题深度解析与解决方案(第三波)
前端·css