Vue3人员选择组件封装

server/2024/11/9 16:44:51/
一、组件介绍
       

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

二、直接上代码

use.vue 父组件

javascript">  <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  (子组件)

javascript"><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>

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

三、效果展示

http://www.ppmy.cn/server/33191.html

相关文章

gin-vue-blog 前后端分离项目(已经部署)

gin-vue-blog 前台&#xff1a; 后台&#xff1a; 1.数据库设计&#xff1a;https://blog.csdn.net/m0_73337964/article/details/138137629?spm1001.2014.3001.5501 2.RESTFUL API路由实现&#xff1a;https://blog.csdn.net/m0_73337964/article/details/138321631?spm1…

美国站群服务器的配置选择要点?

美国站群服务器的配置选择要点? 随着互联网的快速发展&#xff0c;站群已经成为许多网站主和企业选择的一种有效的网络推广方式。而在搭建站群时&#xff0c;选择适合的服务器配置是至关重要的。美国作为全球互联网技术的先锋之一&#xff0c;拥有先进的服务器设施和强大的网…

three.js 中 meshbasic.glsl 文件中的片源着色器的主函数解析

1. three.js 中 meshbasic.glsl 文件中的片源着色器的主函数解析 他的具体代码如下 void main() {#include <uv_vertex>#include <color_vertex>#include <morphcolor_vertex>#if defined ( USE_ENVMAP ) || defined ( USE_SKINNING )#include <beginno…

2024/5/2 C++五一

实现一个类&#xff0c;类中set函数&#xff0c;设置成员a的值&#xff0c;实现Sum函数&#xff0c;打印1到a的所有数字和&#xff0c;实现Product函数&#xff0c;打印1到a之间所有数字乘积&#xff0c;实现PrimeNum&#xff0c;输出1到a所有质数 #include <iostream> …

微隔离实施五步法,让安全防护转起来

前言 零信任的最核心原则→最小权限 安全的第一性原理→预防 零信任的最佳实践→微隔离 “零信任”这个术语的正式出现&#xff0c;公认是在2010年由Forrester分析师John Kindervag最早提出。时至今日&#xff0c;“零信任”俨然已成安全领域最热门的词汇&#xff0c;做安全…

力扣每日一题105:从前序与中序序列构造二叉树

题目 给定两个整数数组 preorder 和 inorder &#xff0c;其中 preorder 是二叉树的先序遍历&#xff0c; inorder 是同一棵树的中序遍历&#xff0c;请构造二叉树并返回其根节点。 示例 1: 输入: preorder [3,9,20,15,7], inorder [9,3,15,20,7] 输出: [3,9,20,null,null,1…

MongoDB详解

目录 一、MongoDB概述 1.MongoDB定义 2.MongoDB主要特点 2.1文档 2.2集合 2.3数据库 2.4数据模型 二、安装MongoDB 1.Windows安装MongoDB 1.1下载MongoDB 1.2安装MongoDB 1.3配置MongoDB 1.3.1可能遇到的问题 1.4安装一盒可视化工具 2.Linux安装MongoDB 2.1下载…

标贝语音识别技术在金融领域中的应用实例

随着语音识别技术与文本挖掘、自然语言处理等技术的不断融合&#xff0c;智能语音交互技术在金融领域中爆发了出巨大的应用潜力。标贝科技根据自身与金融领域合作的经验为大家梳理出以下几点智能语音识别技术在金融领域中的应用实例。 一、智能柜台服务 语音识别的主要功能就…