Vuetify DataTable搜索异常求助：自定义行模板下搜索不实时生效

问题排查与修复步骤 #

1. 移除无效DOM标签
   你的代码中top插槽里有一个多余的</v-card-title>闭合标签，这会破坏DOM结构，导致组件内部逻辑异常，先删除该标签。

2. 确保search变量为响应式
   确认search是Vue的响应式数据：

• Vue 3：使用ref声明

  import { ref } from 'vue'
  const search = ref('')
  

• Vue 2：在data中定义

  export default {
    data() {
      return {
        search: ''
      }
    }
  }
  

3. 调整插槽使用方式（核心修复）
   你完全自定义了item插槽，这会覆盖Vuetify内置的筛选行渲染逻辑，导致搜索变化时表格无法自动更新显示。推荐两种修复方式：

方式一：仅自定义特定列（推荐）

只针对需要自定义的列（比如展开按钮列）使用列插槽，保留表格内置的筛选、排序逻辑：

<v-data-table
    :headers="headers"
    :items="desserts"
    :search="search"
    :sort-by="[{ key: 'calories', order: 'asc' }]"
    item-value="name"
    show-expand
>
    <template v-slot:top>
        <v-text-field
            v-model="search"
            prepend-inner-icon="mdi-magnify"
            density="compact"
            label="Search"
            single-line
            flat
            hide-details
            variant="solo-filled"
        ></v-text-field>
    </template>

    <!-- 自定义展开按钮所在列（需在headers中添加key为'expand'的列） -->
    <template v-slot:item.expand="{ internalItem, isExpanded, toggleExpand }">
        <v-btn 
            :icon="isExpanded(internalItem) ? 'mdi-chevron-up' : 'mdi-chevron-down'" 
            variant="plain"
            @click="toggleExpand(internalItem)"
        ></v-btn>
    </template>

    <template #expanded-row="{item, columns}">
      <!-- 展开行内容 -->
    </template>
</v-data-table>

方式二：自定义整个tbody（需手动绑定筛选后数据）

如果必须自定义整行，使用body插槽基于表格的items（已筛选后的数据集）渲染：

<v-data-table
    :headers="headers"
    :items="desserts"
    :search="search"
    :sort-by="[{ key: 'calories', order: 'asc' }]"
    item-value="name"
    show-expand
>
    <template v-slot:top>
        <v-text-field
            v-model="search"
            prepend-inner-icon="mdi-magnify"
            density="compact"
            label="Search"
            single-line
            flat
            hide-details
            variant="solo-filled"
        ></v-text-field>
    </template>

    <template v-slot:body="{ items, internalItems, isExpanded, toggleExpand }">
        <tbody>
            <tr v-for="(item, idx) in items" :key="item.name">
                <td>{{ item.name }}</td>
                <!-- 其他列内容 -->
                <td @click="toggleExpand(internalItems[idx])">
                    <v-btn 
                        :icon="isExpanded(internalItems[idx]) ? 'mdi-chevron-up' : 'mdi-chevron-down'" 
                        variant="plain"
                    ></v-btn>
                </td>
            </tr>
        </tbody>
    </template>

    <template #expanded-row="{item, columns}">
      <!-- 展开行内容 -->
    </template>
</v-data-table>

原因说明 #

当你完全替换item插槽时，Vuetify会放弃对该行的内置控制（包括筛选后的显示/隐藏），所有行渲染逻辑需由你手动处理。而仅自定义特定列插槽时，表格会保留核心的筛选、排序功能，仅替换指定列的内容。

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