AiTableFilter 列筛选组件

用于控制表格列的显示/隐藏，支持拖拽排序。通常由 AiToolbarAction 内部调用，也可独立使用在自定义工具栏中。

基础用法

<template>
  <AiTableFilter
    :columns="columns"
    :default-checked="defaultChecked"
    @filter-change="handleFilterChange"
  />
</template>

<script setup>
import { ref } from 'vue'
import { AiTableFilter } from '@/components/ai-form'

const columns = ref([
  { prop: 'name', label: '姓名', key: 'name' },
  { prop: 'age', label: '年龄', key: 'age' },
  { prop: 'email', label: '邮箱', key: 'email' },
  { prop: 'status', label: '状态', key: 'status' },
  { prop: 'action', label: '操作', key: 'action' }
])

// 默认全部选中
const defaultChecked = ref(['name', 'age', 'email', 'status', 'action'])

function handleFilterChange(visibleColumns) {
  console.log('当前可见列:', visibleColumns)
  // visibleColumns 是排序后的可见列 key 数组
}
</script>

Props

属性	类型	默认值	说明
columns	Array<object>	[]	表格列配置数组，每项至少包含 prop/label/key
filterMaxHeight	String	'300px'	列选择下拉面板的最大高度
defaultChecked	Array<string>	[]	默认选中的列 key 数组（不传则默认全部选中）

事件

事件名	参数	说明
filter-change	(visibleColumns: Array\<string\>)	列可见性变化，返回排序后的选中列 key 数组

功能说明

1. 显示/隐藏列：通过复选框控制列的可见性
2. 拖拽排序：选中状态下支持拖拽调整列顺序，顺序变化会反映在 filter-change 事件中
3. 重置：下拉面板内提供重置按钮，恢复为默认列设置
4. 自动识别：如果列配置中没有 key 属性，自动使用 prop 作为标识

配合 AiTable 使用

<template>
  <div>
    <div class="toolbar">
      <AiTableFilter
        :columns="allColumns"
        :default-checked="visibleColumnKeys"
        @filter-change="handleFilterChange"
      />
    </div>
    <n-data-table :columns="visibleColumns" :data="dataSource" />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const allColumns = ref([
  { prop: 'name', label: '姓名', key: 'name' },
  { prop: 'age', label: '年龄', key: 'age' },
  { prop: 'email', label: '邮箱', key: 'email' }
])

const visibleColumnKeys = ref(['name', 'age', 'email'])

// 根据选中 key 过滤列
const visibleColumns = computed(() =>
  allColumns.value.filter(col => visibleColumnKeys.value.includes(col.key))
)

function handleFilterChange(checked) {
  visibleColumnKeys.value = checked
}
</script>