VueJS无Vuetify/Vuex场景下自定义数据表格搜索筛选功能实现咨询

核心逻辑是在负责搜索筛选的控制组件内部拆分多层独立的计算属性数据源，所有筛选、搜索、分页状态全部闭环在控制组件内部存储，完全不需要向上回传数据，同时最大化复用现有逻辑，兼容你之前已经实现的向下数据流链路。

第一步：拆分分层数据源 #

你可以在控制组件内维护4层独立的计算属性，每层只负责单一逻辑，方便复用和扩展：

• 原始全量数据层：rawFullData，直接接收父组件传入的全量接口数据，不做任何修改，作为全量检索/筛选的基准数据源
• 基础筛选数据层：baseFilteredData，就是你之前已经实现的第一次预筛选后的数组（比如根据用户权限、全局固定条件筛选后的结果），作为已筛选范围检索/筛选的基准数据源
• 动态数据源切换层：currentDataSource，根据用户选择的检索范围，自动返回对应的基准数据源，后续所有搜索筛选逻辑都复用这个数据源，不需要写两套逻辑
• 最终处理数据层：processedData，在动态数据源的基础上应用关键词搜索、自定义筛选、排序等逻辑，输出最终的待分页数组，直接对接你现有的分页组件

第二步：新增范围切换控制 #

在控制组件内新增一个本地响应式变量filterScope，可选值为all（全量数据）/currentFiltered（已筛选数据），配套UI控件（比如单选框、下拉选）供用户切换范围，所有状态存在控制组件内部，不需要向外暴露。

第三步：兼容现有链路 #

你之前已经实现的分页组件、表格组件逻辑完全不需要修改，processedData直接作为分页组件的输入数据源，分页后的结果通过作用域插槽传给表格渲染即可。

完整代码示例 #

<template>
  <div class="table-control-wrapper">
    <!-- 检索范围切换 -->
    <div class="scope-toggle">
      <label>
        <input v-model="filterScope" type="radio" value="currentFiltered" />
        仅检索当前筛选结果
      </label>
      <label>
        <input v-model="filterScope" type="radio" value="all" />
        检索全量数据
      </label>
    </div>

    <!-- 搜索筛选控件 -->
    <input 
      v-model="searchKeyword" 
      placeholder="全局关键词搜索"
      class="search-input"
    />
    <select v-model="statusFilter" class="filter-select">
      <option value="">全部状态</option>
      <option value="active">启用</option>
      <option value="inactive">禁用</option>
    </select>

    <!-- 现有分页组件，复用原有逻辑 -->
    <Pagination
      :total="processedData.length"
      :page-size="pageSize"
      v-model:current-page="currentPage"
    >
      <template #default="{ offset, limit }">
        <!-- 现有表格组件，复用原有渲染逻辑 -->
        <BaseTable :data="processedData.slice(offset, offset + limit)" />
      </template>
    </Pagination>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import Pagination from './Pagination.vue'
import BaseTable from './BaseTable.vue'

// 接收父组件传入的全量原始数据
const props = defineProps({
  fullData: {
    type: Array,
    default: () => []
  }
})

// 所有状态全部存在控制组件内部，无需向上回传
const filterScope = ref('currentFiltered')
const searchKeyword = ref('')
const statusFilter = ref('')
const currentPage = ref(1)
const pageSize = ref(10)

// 1. 原始全量数据层
const rawFullData = computed(() => props.fullData)

// 2. 基础筛选数据层（复用你之前的预筛选逻辑）
const baseFilteredData = computed(() => {
  return rawFullData.value.filter(item => {
    // 示例：预筛选用户有权限查看的数据，可替换为你原有逻辑
    return item.permission === 'allow'
  })
})

// 3. 动态数据源切换层
const currentDataSource = computed(() => {
  return filterScope.value === 'all' ? rawFullData.value : baseFilteredData.value
})

// 4. 最终处理数据层（模拟Vuetify表格的搜索、筛选、排序能力）
const processedData = computed(() => {
  let result = [...currentDataSource.value]

  // 全局关键词搜索逻辑（和Vuetify的global-search逻辑一致）
  if (searchKeyword.value.trim()) {
    const keyword = searchKeyword.value.trim().toLowerCase()
    result = result.filter(item => {
      return Object.values(item).some(val => {
        return String(val).toLowerCase().includes(keyword)
      })
    })
  }

  // 自定义字段筛选逻辑
  if (statusFilter.value) {
    result = result.filter(item => item.status === statusFilter.value)
  }

  // 可扩展排序逻辑：和Vuetify的sort-by逻辑一致，只需维护sortBy、sortOrder变量即可
  // if (sortBy.value) {
  //   result = result.sort((a, b) => {
  //     return sortOrder.value === 'asc' ? a[sortBy.value] - b[sortBy.value] : b[sortBy.value] - a[sortBy.value]
  //   })
  // }

  return result
})
</script>

扩展说明 #

如果需要模拟更多Vuetify表格的能力，直接在processedData的计算逻辑中扩展即可：

• 单列筛选：新增对应字段的筛选变量，在计算逻辑中增加对应filter规则
• 自定义筛选函数：支持传入自定义匹配逻辑，替换默认的关键词匹配规则
• 多选操作：在控制组件内维护选中行的id数组，所有操作逻辑闭环在内部，不需要向上传递

内容的提问来源于stack exchange，提问作者Nathan Azevedo