TinyVue Grid筛选功能详解

TinyVue Grid 筛选过滤功能详解：让用户自己找到想要的数据

一张有几千行数据的表格，如何让用户快速定位目标？答案是：交给他们强大的筛选工具。本文带你用好 TinyVue Grid 的 filter 功能，从内置筛选到自定义面板，全面覆盖。

---

内置筛选：一行配置搞定

在列配置中加上 filters 属性，立即拥有下拉筛选：

<template>
  <tiny-grid :data="tableData">
    <tiny-grid-column
      field="status"
      title="状态"
      :filters="[
        { label: '在职', value: 'active' },
        { label: '离职', value: 'inactive' },
        { label: '试用期', value: 'probation' }
      ]"
    />
    <tiny-grid-column
      field="dept"
      title="部门"
      :filters="deptFilters"
      :filter-multiple="false"
    />
  </tiny-grid>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { TinyGrid, TinyGridColumn } from '@opentiny/vue'

const tableData = ref([
  { id: 1, name: '张三', dept: '研发部', status: 'active' },
  { id: 2, name: '李四', dept: '产品部', status: 'inactive' },
  { id: 3, name: '王五', dept: '研发部', status: 'probation' }
])

const deptFilters = [
  { label: '研发部', value: '研发部' },
  { label: '产品部', value: '产品部' },
  { label: '设计部', value: '设计部' }
]
</script>

---

服务端筛选

数据量超大时，前端筛选不现实，需要把筛选条件发给后端：

<template>
  <tiny-grid
    ref="gridRef"
    :data="tableData"
    :remote-filter="true"
    @filter-change="onFilterChange"
  >
    <tiny-grid-column field="name"   title="姓名" />
    <tiny-grid-column field="dept"   title="部门"
      :filters="deptFilters"
    />
    <tiny-grid-column field="status" title="状态"
      :filters="statusFilters"
    />
  </tiny-grid>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { TinyGrid, TinyGridColumn } from '@opentiny/vue'

const gridRef = ref()
const tableData = ref([])

async function fetchData(filters: Record<string, any> = {}) {
  // 将筛选条件序列化后发给后端
  const res = await fetch('/api/employees?' + new URLSearchParams(filters))
  tableData.value = await res.json()
}

function onFilterChange({ filters }: any) {
  // filters 结构：[{ field: 'dept', values: ['研发部'] }, ...]
  const params: Record<string, string> = {}
  filters.forEach(({ field, values }: any) => {
    if (values.length) params[field] = values.join(',')
  })
  fetchData(params)
}

fetchData() // 初始加载

---

编程式控制筛选状态

有时需要从代码里触发/清除筛选：

// 清除所有筛选条件
gridRef.value?.clearFilter()

// 清除指定列的筛选
gridRef.value?.clearFilter('dept')

// 关闭筛选面板（不清除条件）
gridRef.value?.closeFilter()

---

总结

场景	方案
数据量小（< 5000 行）	内置 :filters 前端筛选
数据量大	remote-filter + @filter-change 服务端筛选
单选筛选	:filter-multiple="false"
代码清除筛选	gridRef.value?.clearFilter()

---

本文基于 TinyVue 3.x，示例代码使用 Vue 3 Composition API + TypeScript。