Vue项目中Vuetify数据表JSON标题搜索结果不显示求助

核心问题分析 #

你遇到的两个问题本质是同一个原因：Vuetify的v-data-table内置search会对传入的items进行二次过滤，而内置搜索只能识别item的直接属性，无法识别你从json字段解析出来的title。所以即使你的getAllSurveysFiltered返回了正确的过滤列表，内置search会再次过滤这些结果，因为找不到匹配的直接属性，最终导致表格无数据显示；同时原生搜索只能搜ID（因为ID是item的直接属性），搜不到解析后的标题。

解决方案代码修改 #

1. 模板部分：移除内置search绑定，自定义标题列渲染

<v-text-field
  v-model="search"
  append-icon="mdi-magnify"
  label="Search"
  single-line
  hide-details
></v-text-field>

<v-data-table
  :headers="headers"
  :items="showActivatedOnly()"
  sort-by="id"
  class="elevation-1"
>
  <!-- 自定义标题列，渲染解析后的title -->
  <template v-slot:item.title="{ item }">
    {{ JSON.parse(item.json).title }}
  </template>
</v-data-table>

2. 脚本部分：合并激活状态过滤与全局搜索，同时支持ID和标题匹配

showActivatedOnly() {
  // 先根据激活状态筛选基础列表
  const baseItems = this.showActivatedSurveysOnly 
    ? this.adminSurveys 
    : this.adminSurveysOnlyActivated;

  // 无搜索关键词时直接返回基础列表
  if (!this.search) {
    return baseItems;
  }

  // 有搜索关键词时，调用过滤方法处理基础列表
  return this.getAllSurveysFiltered(baseItems);
},
getAllSurveysFiltered(items) {
  const lowerSearch = this.search.toLowerCase();

  return items.filter(item => {
    // 匹配ID（转字符串避免类型问题）
    const matchesId = item.id.toString().toLowerCase().includes(lowerSearch);
    
    // 匹配解析后的标题，加try-catch防止JSON格式错误导致崩溃
    let matchesTitle = false;
    try {
      const parsedJson = JSON.parse(item.json);
      // 可选链操作符防止title不存在报错
      matchesTitle = parsedJson.title?.toString().toLowerCase().includes(lowerSearch);
    } catch (err) {
      console.warn(`解析ID为${item.id}的JSON失败:`, err);
    }

    // 只要ID或标题匹配其中一个就保留
    return matchesId || matchesTitle;
  });
}

额外优化建议 #

可以提前把所有item的json解析好存到一个计算属性里，避免每次过滤和渲染时重复解析JSON，提升性能：

computed: {
  parsedSurveys() {
    return this.adminSurveys.map(item => ({
      ...item,
      parsedTitle: JSON.parse(item.json).title || '无标题'
    }));
    // 对应激活状态的列表也可以做同样处理
  }
}

之后过滤和渲染都用parsedTitle即可，不用每次调用JSON.parse。

内容的提问来源于stack exchange，提问作者Benjamin Tuna