cd-personselector

cd-personselector

基于 Vue 3 + TDesign 的人员选择器组件，支持多 Tab、树形结构、搜索、懒加载等功能。

安装

npm install cd-personselector

使用

<template>
  <PersonSelector
    v-model:visible="showSelector"
    v-model="selectedIds"
    :tabs="tabs"
    :organizations="organizations"
    tips="支持用户名、手机号、职务搜索"
    @confirm="handleConfirm"
    @load-users="handleLoadUsers"
    @search="handleSearch"
    @org-change="handleOrgChange"
  />
</template>
<script setup>
import { ref } from 'vue'
import PersonSelector from 'cd-personselector'
import 'cd-personselector/style.css'
const showSelector = ref(false)
const selectedIds = ref([])
const tabs = ref([
  {
    key: 'department',
    name: '按部门',
    icon: 'folder',
    tree: [
      { id: 'dept-1', name: '研发部', userCount: 5 },
      { id: 'dept-2', name: '产品部', userCount: 3 }
    ]
  },
  {
    key: 'external',
    name: '外部联系人',
    icon: 'usergroup',
    tree: [
      { id: 'ext-1', name: '客户A', isUser: true, phone: '13800001111' }
    ]
  }
])
const organizations = ref([
  { id: 'org-1', name: '总公司' }
])
function handleConfirm(items) {
  console.log('选中项:', items)
}
function handleLoadUsers({ tabKey, nodeId, callback }) {
  // 异步加载用户数据
  fetchUsers(nodeId).then(users => callback(users))
}
function handleSearch({ keyword, orgId, callback }) {
  // 搜索用户
  searchUsers(keyword).then(users => callback(users))
}
function handleOrgChange(orgId) {
  // 切换组织时重新加载 tabs 数据
  loadTabsByOrg(orgId).then(data => {
    tabs.value = data
  })
}
</script>

Props

Events

类型定义

interface TabConfig {
  key: string
  name: string
  icon?: string
  tree: TreeNode[]
}
interface TreeNode {
  id: number | string
  name: string
  children?: TreeNode[]
  userCount?: number
  isUser?: boolean
}
interface User {
  id: number | string
  name: string
  displayName?: string
  phone?: string
  position?: string
  department?: string
}

依赖

• vue >= 3.0.0
• tdesign-vue-next >= 1.0.0