AiToolbarAction 表格工具栏组件

提供表格工具栏的常用操作按钮：刷新、密度调整、列设置（集成 AiTableFilter）、搜索显示/隐藏切换。通常由 AiTable 或 AiCrudPage 内部调用。

基础用法

<template>
  <div class="table-container">
    <div class="table-header">
      <n-space>
        <n-button type="primary">新增</n-button>
      </n-space>
      <AiToolbarAction
        :columns="columns"
        :show-search-toggle="true"
        :search-visible="searchVisible"
        @refresh="handleRefresh"
        @density-change="handleDensityChange"
        @filter-change="handleFilterChange"
        @search-visible-change="handleSearchVisibleChange"
      />
    </div>

    <AiSearch v-if="searchVisible" :schema="searchSchema" @search="handleSearch" />
    <n-data-table :columns="visibleColumns" :data="dataSource" :size="tableSize" />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { AiToolbarAction } from '@/components/ai-form'
import { AiSearch } from '@/components/ai-form'

const tableSize = ref('medium')
const searchVisible = ref(false)
const visibleColumnKeys = ref([])

function handleRefresh() { /* 刷新数据 */ }
function handleDensityChange(size) { tableSize.value = size }
function handleFilterChange(checked) { visibleColumnKeys.value = checked }
function handleSearchVisibleChange(visible) { searchVisible.value = visible }
</script>

Props

属性	类型	默认值	说明
columns	Array<object>	[]	表格列配置（用于列筛选）
showRefresh	Boolean	true	是否显示刷新按钮
showDensity	Boolean	true	是否显示密度调整下拉
showColumnFilter	Boolean	true	是否显示列设置按钮
showSearchToggle	Boolean	false	是否显示搜索显示/隐藏切换按钮
searchVisible	Boolean	false	搜索区域的可见状态（与 showSearchToggle 配合使用）
filterMaxHeight	String	'300px'	列筛选下拉面板最大高度
defaultCheckedColumns	Array<string>	[]	列筛选默认选中的列 key 数组

事件

事件名	参数	说明
refresh	-	点击刷新按钮
density-change	(size: 'small' | 'medium' | 'large')	密度变化
filter-change	(visibleColumns: Array\<string\>)	列筛选变化（透传自 AiTableFilter）
search-visible-change	(visible: boolean)	搜索区域显示/隐藏切换

密度调整

通过下拉菜单切换三种尺寸，点击后触发 density-change 事件：

• 默认（medium）：标准行高
• 紧凑（small）：减小行高，适合数据密集场景
• 宽松（large）：增大行高，提升可读性

function handleDensityChange(size) {
  // size 为 'small' | 'medium' | 'large'
  tableSize.value = size
  // 可持久化到本地存储
  localStorage.setItem('table_density', size)
}