Vue.js中使用map处理数据时创建搜索过滤器及功能失效问题排查

咱们一步步拆解你的搜索功能失效的核心原因，再给出完整的修复方案：

1. 核心错误点分析 #

（1）watch的使用逻辑完全错了 #

你原本计划用计算属性实现过滤，但误写成了watch——watch的作用是监听数据变化并执行副作用（比如发请求、修改状态），它不是用来返回过滤后数据的，没法直接提供给表格做数据源。

（2）product_name被转成了JSX元素，无法做字符串匹配 #

在getProducts里，你把原始的产品名称转成了<a>标签的JSX：

product_name: (<a href={product.product_url}>{product.product_name}</a>),

这导致后续你调用product.product_name.toLowerCase()时，本质是在对一个JSX对象调用字符串方法，直接会报错，根本完成不了过滤。

（3）搜索关键词变量引用混乱 #

你的watch里用了searchText.value，但代码里没看到这个变量的定义；而且监听的search变量也没在函数里实际使用，逻辑完全不闭环。

正确的实现方案 #

第一步：拆分数据，保留原始字符串 #

先把原始产品数据和表格渲染用的格式化数据分开，确保过滤时能拿到纯字符串的产品名称：

// 组件data里新增变量
data() {
  return {
    rawProducts: [], // 存原始产品数据，用于过滤
    dataSource: [], // 存表格渲染用的格式化数据
    searchQuery: '' // 搜索输入框绑定的关键词
  }
},
async getProducts() {
  this.$store.dispatch("actions/setLoading", true);
  const products = (await ProductService.getProducts()).data.products;
  this.rawProducts = products; // 保存原始数据
  this.dataSource = products.map((product, key) => {
    return {
      key: key + 1,
      image_url: (
        <div class="record-img align-center-v">
          <img src={product.image_url} alt={product.product_name} width="100" />
        </div>
      ),
      product_name: product.product_name, // 保留原始字符串，用于过滤
      product_link: (<a href={product.product_url}>{product.product_name}</a>), // 渲染用的链接
      price: product.price,
      price_with_discount: product.price_with_discount,
      categories: product.categories,
      sku: product.sku,
      quantity: product.quantity,
      currency: product.currency,
      action: (
        <div class="table-actions">
          <a href="javascript:void(0)"><sdFeatherIcons type="trash-2" size={14} /> Test</a>
        </div>
      )
    }
  });
  this.$store.dispatch("actions/setLoading", false);
}

第二步：用计算属性实现过滤逻辑 #

把过滤逻辑放到computed里，它会自动根据searchQuery的变化返回新的过滤结果：

computed: {
  filteredProducts() {
    // 没有搜索关键词时，返回全部数据
    if (!this.searchQuery.trim()) {
      return this.dataSource;
    }
    const lowerQuery = this.searchQuery.toLowerCase();
    // 基于原始产品名称字符串做模糊匹配
    return this.dataSource.filter(product => 
      product.product_name.toLowerCase().includes(lowerQuery)
    );
  }
}

第三步：修改表格的数据源绑定 #

把表格的dataSource改成绑定计算属性filteredProducts：

<a-table 
  :rowSelection="rowSelection" 
  :pagination="{ pageSize: 10, showSizeChanger: true }" 
  :dataSource="filteredProducts" 
  :columns="columns" 
/>

第四步：调整表格列的渲染 #

在columns配置里，把产品名称列的dataIndex改成我们定义的product_link，确保渲染出链接：

// 示例columns配置
columns: [
  // ...其他列
  {
    title: '产品名称',
    dataIndex: 'product_link',
    key: 'product_link'
  },
  // ...其他列
]

最后一步：绑定搜索输入框 #

给你的搜索输入框加上v-model，关联searchQuery：

<input type="text" v-model="searchQuery" placeholder="请输入产品名称搜索" />

额外提示 #

如果是Vue 3 Composition API，逻辑完全相通：用ref定义rawProducts、searchQuery，用computed返回过滤后的数组即可。

内容的提问来源于stack exchange，提问作者Key Lol