BizBatchActionsBar 批量操作条

「已选择 N 项 + 批量操作按钮组 + 取消选择」的选择态提示条：count 为 0 时整条隐藏（带过渡动画），与表格多选联动是标准用法。

基础用法

模拟选中数量

已选择 3 项

tip 支持 {count} 占位；clear-text 传空串隐藏取消按钮；开关模拟选中数量观察浮出/隐藏过渡。

<script setup lang="ts">
/** 基础用法：已选计数 + 批量按钮 + 取消选择（count=0 整条隐藏） */
import { ref } from 'vue'
import { ElButton, ElMessage, ElSwitch } from 'element-plus'
import { BizBatchActionsBar, BizConfirmButton } from 'vue3-ep-biz-lib'

const count = ref(3)

const onClear = (): void => {
  count.value = 0
  ElMessage.info('已取消选择')
}
</script>

<template>
  <div style="max-width: 560px">
    <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 14px">
      <span style="font-size: 13px; color: var(--el-text-color-secondary)">模拟选中数量</span>
      <ElSwitch v-model="count" :active-value="3" :inactive-value="0" />
    </div>
    <BizBatchActionsBar :count="count" @clear="onClear">
      <ElButton size="small" plain @click="ElMessage.info('批量启用')">批量启用</ElButton>
      <BizConfirmButton size="small" plain type="danger" message="删除选中的 3 条记录？不可恢复。" @confirm="ElMessage.success('已删除')">
        批量删除
      </BizConfirmButton>
    </BizBatchActionsBar>
  </div>
</template>

表格多选联动

ElTable selection-change 驱动 count 与按钮组；「取消选择」由业务侧清空表格多选。

<script setup lang="ts">
/** 场景：表格多选联动——选中行驱动操作条出现/隐藏与计数 */
import { ref } from 'vue'
import { ElButton, ElMessage, ElTable, ElTableColumn } from 'element-plus'
import { BizBatchActionsBar } from 'vue3-ep-biz-lib'

type RoleRow = { id: number; name: string; role: string }

const rows: RoleRow[] = [
  { id: 1, name: '张伟', role: '安全管理员' },
  { id: 2, name: '李娜', role: '运营' },
  { id: 3, name: '王强', role: '值班经理' },
  { id: 4, name: '赵敏', role: '采购员' },
]

const selected = ref<RoleRow[]>([])

const onSelectionChange = (value: RoleRow[]): void => {
  selected.value = value
}
</script>

<template>
  <div style="max-width: 640px">
    <BizBatchActionsBar :count="selected.length" tip="已选择 {count} 名用户" @clear="selected = []">
      <ElButton size="small" plain type="primary" @click="ElMessage.info(`批量调整 ${selected.length} 人角色`)">调整角色</ElButton>
      <ElButton size="small" plain type="danger" @click="ElMessage.warning(`停用 ${selected.length} 个账号`)">批量停用</ElButton>
    </BizBatchActionsBar>
    <ElTable :data="rows" size="small" border @selection-change="onSelectionChange">
      <ElTableColumn type="selection" width="44" />
      <ElTableColumn prop="name" label="姓名" width="100" />
      <ElTableColumn prop="role" label="角色" />
    </ElTable>
  </div>
</template>

资产盘点批量操作

盘点场景：批量生成盘点单 / 打印资产标签，tip 定制「已勾选 N 件资产待盘点」。

<script setup lang="ts">
/** 场景：资产盘点——批量打印标签 / 生成盘点单 */
import { ref } from 'vue'
import { ElButton, ElMessage, ElTable, ElTableColumn } from 'element-plus'
import { BizBatchActionsBar } from 'vue3-ep-biz-lib'

type AssetRow = { id: number; code: string; name: string; location: string }

const rows: AssetRow[] = [
  { id: 1, code: 'ZC-2026001', name: 'ThinkPad X1', location: 'A-3-01' },
  { id: 2, code: 'ZC-2026002', name: '27 寸显示器', location: 'A-3-02' },
  { id: 3, code: 'ZC-2026003', name: '网件交换机', location: '机房 B' },
]

const selected = ref<AssetRow[]>([])
</script>

<template>
  <div style="max-width: 640px">
    <BizBatchActionsBar :count="selected.length" tip="已勾选 {count} 件资产待盘点" @clear="selected = []">
      <ElButton size="small" plain type="primary" @click="ElMessage.info(`生成 ${selected.length} 件的盘点单`)">生成盘点单</ElButton>
      <ElButton size="small" plain @click="ElMessage.info(`发送 ${selected.length} 张标签至打印机`)">打印标签</ElButton>
    </BizBatchActionsBar>
    <ElTable :data="rows" size="small" border @selection-change="(value: AssetRow[]) => (selected = value)">
      <ElTableColumn type="selection" width="44" />
      <ElTableColumn prop="code" label="资产编号" width="120" />
      <ElTableColumn prop="name" label="名称" />
      <ElTableColumn prop="location" label="位置" width="90" />
    </ElTable>
  </div>
</template>

批量授权（上限提示）

权限场景：勾选超过单次上限（2 人）时操作按钮替换为超限警示——操作条兼作校验提示位。

<script setup lang="ts">
/** 场景：批量授权——角色分配 + 数量上限提示 */
import { ref } from 'vue'
import { ElButton, ElMessage, ElTable, ElTableColumn, ElTag } from 'element-plus'
import { BizBatchActionsBar } from 'vue3-ep-biz-lib'

type UserRow = { id: number; name: string; current: string }

const rows: UserRow[] = [
  { id: 1, name: '张伟', current: '安全管理员' },
  { id: 2, name: '李娜', current: '运营' },
  { id: 3, name: '王强', current: '访客' },
]

const selected = ref<UserRow[]>([])
const overLimit = ref(false)

const onSelectionChange = (value: UserRow[]): void => {
  selected.value = value
  overLimit.value = value.length > 2
}
</script>

<template>
  <div style="max-width: 640px">
    <BizBatchActionsBar :count="selected.length" tip="为 {count} 名用户调整角色" @clear="selected = []">
      <template v-if="overLimit">
        <ElTag size="small" type="danger">单次最多 2 人</ElTag>
      </template>
      <ElButton v-else size="small" plain type="primary" @click="ElMessage.success(`已为 ${selected.length} 人分配「审批员」`)">设为审批员</ElButton>
    </BizBatchActionsBar>
    <ElTable :data="rows" size="small" border @selection-change="onSelectionChange">
      <ElTableColumn type="selection" width="44" />
      <ElTableColumn prop="name" label="姓名" width="100" />
      <ElTableColumn prop="current" label="当前角色" />
    </ElTable>
  </div>
</template>

文件批量管理

网盘场景：批量移动（共享失效确认）与批量删除（回收站二次确认）双危险动作组合，确认后真实移除行。

<script setup lang="ts">
/** 场景：文件批量管理——移动/删除（危险动作二次确认组合） */
import { ref } from 'vue'
import { ElMessage, ElTable, ElTableColumn, ElTag } from 'element-plus'
import { BizBatchActionsBar, BizConfirmButton } from 'vue3-ep-biz-lib'

type FileRow = { id: number; name: string; size: string; shared: boolean }

const rows = ref<FileRow[]>([
  { id: 1, name: 'Q3 经营分析.xlsx', size: '2.4MB', shared: true },
  { id: 2, name: '验收材料.pdf', size: '8.1MB', shared: false },
  { id: 3, name: '现场照片.zip', size: '46MB', shared: false },
])

const selected = ref<FileRow[]>([])

const onMove = (): void => {
  ElMessage.info(`移动 ${selected.value.length} 个文件至「归档」目录`)
}

const onDelete = (): void => {
  rows.value = rows.value.filter((row) => !selected.value.some((item) => item.id === row.id))
  selected.value = []
  ElMessage.success('已删除选中文件')
}
</script>

<template>
  <div style="max-width: 640px">
    <BizBatchActionsBar :count="selected.length" @clear="selected = []">
      <BizConfirmButton size="small" plain message="移动后共享链接将失效，是否继续？" @confirm="onMove">批量移动</BizConfirmButton>
      <BizConfirmButton size="small" plain type="danger" message="删除的文件进入回收站，30 天后彻底清除，是否继续？" @confirm="onDelete">
        批量删除
      </BizConfirmButton>
    </BizBatchActionsBar>
    <ElTable :data="rows" size="small" border @selection-change="(value: FileRow[]) => (selected = value)">
      <ElTableColumn type="selection" width="44" />
      <ElTableColumn prop="name" label="文件名" />
      <ElTableColumn prop="size" label="大小" width="80" align="right" />
      <ElTableColumn label="共享" width="80">
        <template #default="{ row }"><ElTag v-if="row.shared" size="small" type="success">已共享</ElTag></template>
      </ElTableColumn>
    </ElTable>
  </div>
</template>

Props

属性名	类型	默认值	说明
count	`number`	`0`	已选条数（0 时隐藏）
tip	`string`	`'已选择 {count} 项'`	计数文案（{count} 占位）
clear-text	`string`	`'取消选择'`	取消按钮文案（空串隐藏）

Events

事件名	参数	说明
clear	—	取消选择（业务侧清空多选）

Slots

插槽名	说明
default	批量操作按钮组

Expose

属性/方法	说明
—	无暴露实例

BizBatchActionsBar 批量操作条 ​

基础用法 ​

表格多选联动 ​

资产盘点批量操作 ​

批量授权（上限提示） ​

文件批量管理 ​

Props ​

Events ​

Slots ​

Expose ​