BizToolbar 工具栏

列表页工具栏：左侧批量操作插槽 + 右侧刷新 / 密度切换 / 列设置（可持久化用户列偏好）。与 BizTable 或 el-table 等任意表格搭配。

基础用法

v-model:columns 驱动列设置面板，v-model:size 联动表格密度，@refresh 重新拉取数据；左侧插槽放批量操作。

<script setup lang="ts">
/** 基础用法：左侧批量操作插槽 + 刷新 + 密度 + 列设置，配合任意表格（此处 el-table） */
import { computed, ref } from 'vue'
import { ElTable, ElTableColumn } from 'element-plus'
import { Delete } from '@element-plus/icons-vue'
import { BizConfirmButton, BizToolbar } from 'vue3-ep-biz-lib'
import type { BizToolbarColumnItem } from 'vue3-ep-biz-lib'

const columns = ref<BizToolbarColumnItem[]>([
  { prop: 'name', label: '姓名' },
  { prop: 'dept', label: '部门' },
  { prop: 'mobile', label: '手机号' },
  { prop: 'entry', label: '入职日期' },
])

const size = ref<'large' | 'default' | 'small'>('default')
const refreshCount = ref(0)

const rows = [
  { name: '张三', dept: '研发部', mobile: '13800138000', entry: '2024-03-12' },
  { name: '李四', dept: '安全管理部', mobile: '13900139000', entry: '2025-07-01' },
]

/** 列设置勾选 → 过滤表格列 */
const visibleColumns = computed(() => columns.value.filter((column) => column.visible !== false))
</script>

<template>
  <!-- ClientOnly：跳过 SSR 水合，避免 ElPopover/ElDropdown 触发引用在水合期交叉接线 -->
  <ClientOnly>
    <div>
    <BizToolbar v-model:columns="columns" v-model:size="size" @refresh="refreshCount += 1">
      <BizConfirmButton type="danger" :icon="Delete" plain size="small" message="删除选中的 2 条记录？">批量删除</BizConfirmButton>
    </BizToolbar>

    <ElTable :data="rows" :size="size">
      <ElTableColumn v-for="column in visibleColumns" :key="column.prop" :prop="column.prop" :label="column.label" />
    </ElTable>

    <div class="tip">刷新次数：{{ refreshCount }}｜当前密度：{{ size }}｜可见列：{{ visibleColumns.map((c) => c.label).join('、') }}</div>
    </div>
  </ClientOnly>
</template>

<style scoped>
.tip {
  margin-top: 8px;
  font-size: 13px;
  color: var(--el-text-color-secondary);
}
</style>

其他用法

storage-key 开启列偏好持久化（刷新页面保留）；disabled 锁定列不可隐藏。

<script setup lang="ts">
/** 其他用法：列偏好持久化（localStorage，刷新页面保留）+ 固定列（disabled 不可隐藏） */
import { computed, ref } from 'vue'
import { ElTable, ElTableColumn } from 'element-plus'
import { BizToolbar } from 'vue3-ep-biz-lib'
import type { BizToolbarColumnItem } from 'vue3-ep-biz-lib'

const columns = ref<BizToolbarColumnItem[]>([
  { prop: 'id', label: '编号', disabled: true },
  { prop: 'name', label: '姓名' },
  { prop: 'orderNo', label: '订单号' },
  { prop: 'amount', label: '金额' },
  { prop: 'action', label: '操作', disabled: true },
])

const rows = [
  { id: 1, name: '张三', orderNo: 'SO20260901001', amount: '¥ 1,280.00' },
  { id: 2, name: '李四', orderNo: 'SO20260901002', amount: '¥ 860.00' },
]

const visibleColumns = computed(() => columns.value.filter((column) => column.visible !== false))
</script>

<template>
  <!-- ClientOnly：跳过 SSR 水合，避免 ElPopover/ElDropdown 触发引用在水合期交叉接线 -->
  <ClientOnly>
    <div>
    <BizToolbar v-model:columns="columns" storage-key="biz-toolbar-demo-columns" :density="false">
      <span class="label">订单列表</span>
    </BizToolbar>

    <ElTable :data="rows" size="small">
      <ElTableColumn v-for="column in visibleColumns" :key="column.prop" :prop="column.prop" :label="column.label" />
    </ElTable>

    <div class="tip">取消勾选「订单号」后刷新页面——列偏好保留（localStorage）；编号/操作列被锁定不可隐藏。</div>
    </div>
  </ClientOnly>
</template>

<style scoped>
.label {
  font-size: 14px;
  font-weight: 600;
  color: var(--el-text-color-primary);
}

.tip {
  margin-top: 8px;
  font-size: 13px;
  color: var(--el-text-color-secondary);
}
</style>

运营报表（列设置持久化）

报表场景：工具栏配合手写 el-table（不强绑 BizTable），storage-key 将列勾选持久化到 localStorage——取消「负责人」列后刷新页面，勾选状态保留；密度切换实时生效。

<script setup lang="ts">
/** 场景：运营报表——工具栏 + 手写 el-table，列设置持久化（刷新页面记住勾选） */
import { computed, ref } from 'vue'
import { ElTable, ElTableColumn, ElTag } from 'element-plus'
import { BizToolbar } from 'vue3-ep-biz-lib'
import type { BizToolbarColumnItem } from 'vue3-ep-biz-lib'

const columns = ref<BizToolbarColumnItem[]>([
  { prop: 'date', label: '日期' },
  { prop: 'pv', label: '访问量' },
  { prop: 'uv', label: '访客数' },
  { prop: 'conv', label: '转化率' },
  { prop: 'gmv', label: 'GMV' },
  { prop: 'owner', label: '负责人' },
])

const size = ref<'large' | 'default' | 'small'>('small')
const refreshCount = ref(0)

const rows = [
  { date: '09-21', pv: 12840, uv: 3920, conv: '3.2%', gmv: '¥ 86,420', owner: '王五' },
  { date: '09-22', pv: 14301, uv: 4155, conv: '2.9%', gmv: '¥ 91,033', owner: '王五' },
  { date: '09-23', pv: 9882, uv: 2910, conv: '3.6%', gmv: '¥ 72,158', owner: '赵六' },
]

const visibleColumns = computed(() => columns.value.filter((column) => column.visible !== false))
</script>

<template>
  <ClientOnly>
    <div>
      <BizToolbar
        v-model:columns="columns"
        v-model:size="size"
        storage-key="demo-report-columns"
        @refresh="refreshCount += 1"
      />
      <ElTable :data="rows" :size="size" border stripe>
        <ElTableColumn prop="date" label="日期" width="90" />
        <ElTableColumn v-for="column in visibleColumns.filter((c) => c.prop !== 'date')" :key="column.prop" :prop="column.prop" :label="column.label" />
      </ElTable>
      <div style="margin-top: 8px; display: flex; gap: 8px; align-items: center">
        <ElTag size="small" type="info">刷新 {{ refreshCount }} 次</ElTag>
        <span style="font-size: 13px; color: var(--el-text-color-secondary)">
          storage-key 持久化列勾选——取消「负责人」列后刷新页面，勾选状态保留
        </span>
      </div>
    </div>
  </ClientOnly>
</template>

完整列表页工具栏

列表页场景：BizTable 内置工具栏（refresh / density / columnSetting）+ toolbar-left 插槽放「屏蔽选中」批量确认操作。

<script setup lang="ts">
/** 场景：完整列表页工具栏——标题 + 批量操作 + 刷新/密度/列设置（配合 BizTable） */
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Delete } from '@element-plus/icons-vue'
import { BizConfirmButton, BizTable } from 'vue3-ep-biz-lib'
import type { BizTableColumn } from 'vue3-ep-biz-lib'

type AlarmRow = { id: number; device: string; level: 'critical' | 'major' | 'minor'; message: string; at: string }

const data: AlarmRow[] = Array.from({ length: 8 }, (_unused, i) => ({
  id: i + 1,
  device: `传感器-${String(i + 1).padStart(2, '0')}`,
  level: (['critical', 'major', 'minor'] as const)[i % 3],
  message: ['温度超限 82℃', '离线超 5 分钟', '数值抖动异常'][i % 3],
  at: `09-23 ${String(8 + i).padStart(2, '0')}:12`,
}))

const columns: BizTableColumn<AlarmRow>[] = [
  { type: 'selection' },
  { prop: 'device', label: '设备', width: 110 },
  { prop: 'level', label: '级别', width: 90, enums: [
    { value: 'critical', label: '紧急', tag: 'danger' },
    { value: 'major', label: '重要', tag: 'warning' },
    { value: 'minor', label: '次要', tag: 'info' },
  ] },
  { prop: 'message', label: '告警内容' },
  { prop: 'at', label: '时间', width: 100 },
]

const refreshCount = ref(0)
</script>

<template>
  <ClientOnly>
    <div>
      <BizTable
        :columns="columns"
        :data="data"
        row-key="id"
        title="实时告警"
        :toolbar="{ refresh: true, density: true, columnSetting: true }"
        @refresh="refreshCount += 1"
      >
        <template #toolbar-left>
          <BizConfirmButton type="danger" size="small" plain :icon="Delete" message="确认屏蔽选中的告警？屏蔽期内不再提醒。" @confirm="ElMessage.success('已屏蔽选中告警')">
            屏蔽选中
          </BizConfirmButton>
        </template>
      </BizTable>
      <div style="margin-top: 8px; font-size: 13px; color: var(--el-text-color-secondary)">已手动刷新 {{ refreshCount }} 次</div>
    </div>
  </ClientOnly>
</template>

列设置禁用项

结构列保护场景：序号 / 单号 / 操作列 disabled——列设置面板中不可取消，业务列自由勾选。

<script setup lang="ts">
/** 场景：列设置禁用项——序号/操作列强制常显，业务列自由勾选 */
import { computed, ref } from 'vue'
import { ElTable, ElTableColumn } from 'element-plus'
import { BizToolbar } from 'vue3-ep-biz-lib'
import type { BizToolbarColumnItem } from 'vue3-ep-biz-lib'

const columns = ref<BizToolbarColumnItem[]>([
  { prop: 'index', label: '序号', disabled: true },
  { prop: 'sn', label: '单号', disabled: true },
  { prop: 'buyer', label: '买家' },
  { prop: 'amount', label: '金额' },
  { prop: 'channel', label: '渠道' },
  { prop: 'op', label: '操作', disabled: true },
])

const size = ref<'large' | 'default' | 'small'>('default')
const visibleColumns = computed(() => columns.value.filter((column) => column.visible !== false))

const rows = [
  { index: 1, sn: 'SO-1001', buyer: '客户A', amount: '¥ 599', channel: '小程序', op: '查看' },
  { index: 2, sn: 'SO-1002', buyer: '客户B', amount: '¥ 1,280', channel: 'APP', op: '查看' },
]
</script>

<template>
  <ClientOnly>
    <div style="max-width: 640px">
      <BizToolbar v-model:columns="columns" v-model:size="size" />
      <ElTable :data="rows" :size="size" border>
        <ElTableColumn v-for="column in visibleColumns" :key="column.prop" :prop="column.prop" :label="column.label" />
      </ElTable>
      <div style="margin-top: 8px; font-size: 13px; color: var(--el-text-color-secondary)">
        序号 / 单号 / 操作三列 disabled——列设置面板中不可取消（结构列强制常显）
      </div>
    </div>
  </ClientOnly>
</template>

刷新联动 loading

看板场景：refresh 事件驱动表格 v-loading + 更新时间戳刷新——工具栏与内容区状态联动。

<script setup lang="ts">
/** 场景：刷新联动 loading——refresh 事件驱动表格加载态与数据时间戳 */
import { ref } from 'vue'
import { ElTable, ElTableColumn } from 'element-plus'
import { BizToolbar } from 'vue3-ep-biz-lib'

const size = ref<'large' | 'default' | 'small'>('small')
const loading = ref(false)
const updatedAt = ref('09-23 12:00:00')
const tick = ref(0)

const rows = ref([
  { metric: '今日 GMV', value: '¥ 26,184.00' },
  { metric: '待发货单', value: '132' },
  { metric: '售后待处理', value: '7' },
])

const columns = ref([
  { prop: 'metric', label: '指标' },
  { prop: 'value', label: '数值' },
])

const onRefresh = (): void => {
  loading.value = true
  window.setTimeout(() => {
    tick.value += 1
    rows.value = [...rows.value]
    updatedAt.value = new Date().toLocaleTimeString('zh-CN')
    loading.value = false
  }, 800)
}
</script>

<template>
  <ClientOnly>
    <div style="max-width: 520px">
      <BizToolbar v-model:columns="columns" v-model:size="size" @refresh="onRefresh">
        <span style="font-size: 14px; font-weight: 600">经营概览</span>
        <span style="margin-left: 10px; font-size: 12px; color: var(--el-text-color-secondary)">更新于 {{ updatedAt }}（刷新 {{ tick }} 次）</span>
      </BizToolbar>
      <ElTable v-loading="loading" :data="rows" :size="size" border>
        <ElTableColumn prop="metric" label="指标" />
        <ElTableColumn prop="value" label="数值" align="right" />
      </ElTable>
    </div>
  </ClientOnly>
</template>

Props

属性名	类型	默认值	说明
columns	`BizToolbarColumnItem[]`	`[]`	列配置（v-model:columns）
refreshable	`boolean`	`true`	是否显示刷新按钮
density	`boolean`	`true`	是否显示密度切换
column-setting	`boolean`	`true`	是否显示列设置面板
storage-key	`string`	`''`	列偏好持久化 key（localStorage，存可见列 prop）；留空不持久化
size	`'large' \| 'default' \| 'small'`	`'default'`	表格尺寸（v-model:size，密度切换绑定）

BizToolbarColumnItem： { prop: string; label: string; visible?: boolean; disabled?: boolean }

Events

事件名	参数	说明
update:columns	`(columns: BizToolbarColumnItem[])`	列可见性变化（含挂载时恢复持久化偏好的一次同步）
update:size	`(size)`	密度切换
refresh	—	点击刷新按钮（重新拉取数据）

Slots

插槽名	说明
default	左侧区域（批量删除 / 导出等操作按钮、列表标题）

Expose

属性/方法	说明
—	无对外暴露

BizToolbar 工具栏 ​

基础用法 ​

其他用法 ​

运营报表（列设置持久化） ​

完整列表页工具栏 ​

列设置禁用项 ​

刷新联动 loading ​

Props ​

Events ​

Slots ​

Expose ​