@scenetechnology/cj_orgpicker NPM

cj_orgpicker

项目概述

cj_orgpicker 是一个基于 Vue3 和 Element Plus 的组织选择组件。该组件提供了部门和用户的多选功能，支持树形结构展示，可用于组织架构人员选择等场景。

安装说明

环境要求

Node.js (建议 v16 或更高版本)
Vue 3.x
Element Plus

安装步骤

使用npm安装组件：

npm install @scenetechnology/cj_orgpicker --legacy-peer-deps

在main.js中引入组件：

import cj_orgpicker from '@scenetechnology/cj_orgpicker'
import '@scenetechnology/cj_orgpicker/dist/cj_orgpicker.css'

app.use(cj_orgpicker)

组件说明

cj_orgpicker 组件提供以下主要功能：

支持部门和用户的树形展示和选择
支持多选功能
支持搜索过滤

属性配置

基础属性

属性名	说明	类型	默认值	是否必填
title	对话框标题	String	'请选择'	否
type	选择器类型，可选值：'org'、'user'、'dept'、'role'	String	'org'	否
multiple	是否多选	Boolean	false	否
selected	已选中的项	Array	[]	否
show	是否显示对话框	Boolean	false	否

事件

事件名	说明	回调参数
selectOk	点击确定按钮时触发	(value: array) 当前选中的值
selectClose	关闭对话框时触发	-

使用示例

<template>
  <cj_orgpicker
    v-model:show="showPicker"
    title="选择组织"
    type="org"
    :multiple="true"
    :selected="selectedItems"
    @selectOk="handleSelectOk"
    @selectClose="handleSelectClose"
  />
</template>

<script setup>
import { ref } from 'vue'

const showPicker = ref(false)
const selectedItems = ref([])

const handleSelectOk = (value) => {
  console.log('选中的项：', value)
  selectedItems.value = value
  showPicker.value = false
}

const handleSelectClose = () => {
  showPicker.value = false
}
</script>