BizUserCell 用户信息单元

头像 + 姓名 + 附属行（部门 / 工号 / 手机）的「人」单元格标准件：表格、列表、选人结果回显等出现频率最高的人员展示位一个组件搞定。支持尺寸档位、link 可点击样式、mask 姓名脱敏、附属行插槽。与 BizUserGroup（头像组）、BizTablePicker（选人）配套。

基础用法

王小明研发部 · P6李芳客服一组 · 工号 1024

头像 + 姓名 + 附属行；无头像时渲染占位图标。

<script setup lang="ts">
/** 基础用法：头像 + 姓名 + 附属行；无头像渲染占位图标 */
import { BizUserCell } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 16px; max-width: 320px">
    <BizUserCell name="王小明" desc="研发部 · P6" avatar="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
    <BizUserCell name="李芳" desc="客服一组 · 工号 1024" />
  </div>
</template>

显示代码

尺寸与可点击

王小明研发部欧阳大明产品部 · P7李芳客服中心负责人 · 工号 1001

size 三档控制头像与字号；link 开启主色名字 + hover，点击 emit click。

<script setup lang="ts">
/** 尺寸档位与交互：small 24 / default 32 / large 40 头像；link 主色可点击 */
import { ElMessage } from 'element-plus'
import { BizUserCell } from 'vue3-ep-biz-lib'

const onOpen = (name: string): void => {
  ElMessage.info(`打开 ${name} 的主页`)
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 20px; max-width: 360px">
    <BizUserCell size="small" name="王小明" desc="研发部" avatar="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" link @click="onOpen('王小明')" />
    <BizUserCell name="欧阳大明" desc="产品部 · P7" avatar="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" link @click="onOpen('欧阳大明')" />
    <BizUserCell size="large" name="李芳" desc="客服中心负责人 · 工号 1001" />
  </div>
</template>

显示代码

脱敏与附属行插槽

王**13812345678欧***440300199203054321张伟

mask 姓名脱敏（王* / 欧阳**）；desc 插槽自定义附属行（标签 + 文本混排）。

<script setup lang="ts">
/** 脱敏与附属行插槽：mask 姓名打码（王* / 欧阳**）；desc 插槽自定义附属行 */
import { ElTag } from 'element-plus'
import { BizUserCell } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 16px; max-width: 380px">
    <BizUserCell name="王小明" desc="13812345678" mask />
    <BizUserCell name="欧阳大明" desc="440300199203054321" mask />
    <BizUserCell name="张伟" avatar="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
      <template #desc>
        <ElTag size="small" type="warning" effect="plain">负责人</ElTag>
        <span style="margin-left: 6px">运维部</span>
      </template>
    </BizUserCell>
  </div>
</template>

显示代码

表格与选人回显

共 2 条

• 1

前往

页

工单列表的发起人 / 审批人列：小尺寸嵌入表格，审批人列脱敏展示。

<script setup lang="ts">
/** 表格与选人回显：审批人 / 负责人列通用单元；mask 列脱敏展示 */
import { BizTable, BizUserCell } from 'vue3-ep-biz-lib'
import type { BizTableColumn } from 'vue3-ep-biz-lib'

type TicketRow = {
  id: number
  title: string
  owner: { name: string; dept: string; avatar?: string }
  approver: { name: string; dept: string }
}

const data: TicketRow[] = [
  { id: 1, title: '生产环境发布申请', owner: { name: '王小明', dept: '研发部', avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png' }, approver: { name: '欧阳大明', dept: '技术总监' } },
  { id: 2, title: '权限扩容申请', owner: { name: '李芳', dept: '客服中心' }, approver: { name: '王小明', dept: '研发部' } },
]

const columns: BizTableColumn<TicketRow>[] = [
  { prop: 'title', label: '工单标题', minWidth: 150 },
  { prop: 'owner', label: '发起人', width: 190, slot: 'owner' },
  { prop: 'approver', label: '审批人', width: 190, slot: 'approver' },
]
</script>

<template>
  <div style="height: 220px">
    <BizTable :columns="columns" :data="data" row-key="id" border>
      <template #owner="{ row }">
        <BizUserCell :name="row.owner.name" :desc="row.owner.dept" :avatar="row.owner.avatar" size="small" link />
      </template>
      <template #approver="{ row }">
        <BizUserCell :name="row.approver.name" :desc="row.approver.dept" size="small" mask />
      </template>
    </BizTable>
  </div>
</template>

显示代码

资料卡与抽屉联动

王小明研发部 · 前端负责人欧阳大明产品部 · 产品经理

large 尺寸 + link 点击打开详情抽屉（选人结果回显 / 个人主页入口）。

<script setup lang="ts">
/** 个人资料场景：large 尺寸 + link 点击打开详情抽屉（选人结果 / 审批人查看主页常用） */
import { ref } from 'vue'
import { ElDescriptions, ElDescriptionsItem, ElDrawer, ElTag } from 'element-plus'
import { BizUserCell } from 'vue3-ep-biz-lib'

interface Member {
  name: string
  desc: string
  dept: string
  role: string
  phone: string
  tags: string[]
}

const members: Member[] = [
  { name: '王小明', desc: '研发部 · 前端负责人', dept: '研发部', role: '前端负责人', phone: '138****5678', tags: ['考勤 A', '在职'] },
  { name: '欧阳大明', desc: '产品部 · 产品经理', dept: '产品部', role: '产品经理', phone: '139****2211', tags: ['在职'] },
]

const drawer = ref(false)
const active = ref<Member | null>(null)

const open = (member: Member): void => {
  active.value = member
  drawer.value = true
}

const onClosed = (): void => {
  active.value = null
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 16px; max-width: 400px">
    <BizUserCell
      v-for="m in members"
      :key="m.name"
      size="large"
      :name="m.name"
      :desc="m.desc"
      avatar="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
      link
      @click="open(m)"
    />

    <ElDrawer v-model="drawer" :title="active?.name ?? ''" size="320px" @closed="onClosed">
      <ElDescriptions v-if="active" :column="1" size="small" border>
        <ElDescriptionsItem label="部门">{{ active.dept }}</ElDescriptionsItem>
        <ElDescriptionsItem label="角色">{{ active.role }}</ElDescriptionsItem>
        <ElDescriptionsItem label="手机">{{ active.phone }}</ElDescriptionsItem>
        <ElDescriptionsItem label="标签">
          <ElTag v-for="t in active.tags" :key="t" size="small" style="margin-right: 6px">{{ t }}</ElTag>
        </ElDescriptionsItem>
      </ElDescriptions>
    </ElDrawer>
  </div>
</template>

显示代码

脱敏开关

姓名脱敏

张*当前经办人 · 工号 1001王**客户经理 · 工号 2001欧***风控专员 · 工号 2002李*柜员 · 工号 2003

开关一键切换姓名打码；displayName 读取脱敏后的展示名（提交 / 审计留痕）。

<script setup lang="ts">
/** 脱敏开关：合规场景一键切换姓名打码；displayName 读取脱敏后的展示名（提交 / 审计留痕用） */
import { ref } from 'vue'
import { ElButton, ElMessage, ElSwitch } from 'element-plus'
import { BizUserCell } from 'vue3-ep-biz-lib'

const masked = ref(true)
const operatorRef = ref<{ displayName: string }>()

const users = [
  { name: '王小明', desc: '客户经理 · 工号 2001' },
  { name: '欧阳大明', desc: '风控专员 · 工号 2002' },
  { name: '李芳', desc: '柜员 · 工号 2003' },
]

const readName = (): void => {
  ElMessage.info(`displayName：${operatorRef.value?.displayName ?? ''}`)
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 16px; max-width: 380px">
    <div style="display: flex; gap: 12px; align-items: center">
      <ElSwitch v-model="masked" />
      <span style="font-size: 13px">姓名脱敏</span>
      <ElButton link type="primary" size="small" @click="readName">读取经办人 displayName</ElButton>
    </div>

    <BizUserCell
      ref="operatorRef"
      name="张伟"
      desc="当前经办人 · 工号 1001"
      avatar="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
      :mask="masked"
    />

    <BizUserCell v-for="u in users" :key="u.name" :name="u.name" :desc="u.desc" :mask="masked" />
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
name	string	—（必填）	姓名
avatar	string	—	头像地址（缺省占位图标）
desc	string	—	附属行文本
size	'small' | 'default' | 'large'	default	尺寸（头像 24 / 32 / 40）
link	boolean	false	可点击样式（主色名字，emit click）
mask	boolean	false	姓名脱敏

Events

事件名	参数	说明
click	(event)	link 模式下点击单元格

Slots

插槽名	说明
desc	覆盖附属行内容

Expose

属性/方法	说明
displayName	当前展示名（脱敏后）