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>

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

三、效果展示
相关推荐
翻滚吧键盘29 分钟前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹36 分钟前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志38 分钟前
typescript结构化类型应用两例
javascript
杨进军1 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW1 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字1 小时前
Kotlin lazy 委托的底层实现原理
前端
gnip2 小时前
总结一期正则表达式
javascript·正则表达式
Q_970956392 小时前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js
爱分享的程序员2 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘2 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js