如何让Vuetify外部自定义搜索栏实现v-data-table自带搜索的过滤功能

实现逻辑 #

你当前的组件为父子嵌套结构，只需通过父组件作为中间层传递搜索值即可实现联动，全程复用v-data-table内置的搜索逻辑，和官方默认搜索栏效果完全一致。

第一步：修改Search.vue（搜索子组件） #

给输入框绑定值，监听变化后将内容同步给父组件：

<template>
  <v-form>
    <v-text-field
      v-model="searchValue"
      outlined
      filled
      append-icon="mdi-magnify"
      color="blue"
      placeholder="Buscar..."
    ></v-text-field>
  </v-form>
</template>

<script>
export default {
  name: "Search",
  data: () => ({
    searchValue: ''
  }),
  watch: {
    searchValue(newVal) {
      this.$emit('update:search', newVal)
    }
  }
};
</script>

第二步：修改List.vue（父页面组件） #

父组件存储公共搜索值，接收搜索组件的传值后同步给表格组件：

<template>
  <v-container>
    <v-row class="mt-5">
      <v-col cols="6">
        <div style="display: flex">
          <div class="mx-4">
            <v-icon color="black">mdi-card-account-details-outline</v-icon>
          </div>
          <div>
            <h2>Listado de Pacientes</h2>
            <p style="color: grey">Visualizacion de pacientes</p>
          </div>
        </div>
      </v-col>

      <v-col cols="6">
        <Search @update:search="search = $event"/>
      </v-col>
    </v-row>

    <v-row>
      <v-col cols="12">
        <CardList :search="search"/>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import Search from "../components/Search";
import CardList from "../components/CardList";

export default {
  name: "List",
  components: {
    Search,
    CardList,
  },
  data() {
    return {
      search: ''
    }
  }
};
</script>

第三步：修改CardList.vue（表格子组件） #

把原来data里的search字段改为从props接收，直接绑定到v-data-table的search属性即可，原有模板部分不需要改动：

<script>
import usersData from "../assets/json/pacientes.json";

export default {
  name: "CardList",
  props: {
    search: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      users: usersData,
      selectDefault: "Editar",
      drop: ["Editar", "Finalizar", "Borrar"],
      headers: [
        {
          text: "Nombre y Apellidos",
          value: "datos_paciente.nombre",
        },
        { text: "Clínica", value: "ficha_dental.clinica" },
        {
          text: "Objetivo Tratamiento",
          value: "ficha_dental.acadas_tratamiento",
        },
        { text: "Estado", value: "ficha_dental.estado" },
        { text: "Acciones", value: "options" },
      ],
    };
  },
}
</script>

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