使用外部搜索验证数据 table？

Question

我有vuetify的v-data-table组件，你可以在它的属性中默认添加一个过滤栏。此 table 从本地 json 获取数据，目前一切顺利。

当我在这个 table 之外有 1 个组件时，问题就来了，这是一个用 (v-form / v-text-field) 创建的搜索栏，该栏必须具有与v-data-table .

的搜索栏

如何让组件相互通信并像默认提供的 v-data-table 一样工作？

如果你需要示例代码，我会尝试做一个总结示例。

更新

我已经清理了代码，使其更清晰。

组件 A - CardList.vue

<template>
  <v-container>
      <v-data-table
        :headers="headers"
        :items="users"
        :search="search"
        hide-default-footer
        class="elevation-1"
      >
        <template v-slot:[`item.datos_paciente.nombre`]="{ item }"
          >{{ item.datos_paciente.nombre }}
          {{ item.datos_paciente.apellidos }}</template
        >
        <template v-slot:[`item.ficha_dental.estado`]="{ item }">
          <v-chip :color="getColor(item.ficha_dental.estado)" dark>
            {{ item.ficha_dental.estado }}
          </v-chip>
        </template>
        <template v-slot:[`item.options`]>
          <v-select v-model="selectDefault" :items="drop"></v-select>
        </template>
      </v-data-table>
      <div class="text-center pt-2">
        <v-pagination v-model="page" :length="pageCount"></v-pagination>
      </div>
    </v-card>
  </v-container>
</template>

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

export default {
  name: "CardList",
  data() {
    return {
      search: "",

      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" },
      ],
    };
  },

组件 B -Search.vue

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

<script>
export default {
  name: "Search",

  data: () => ({}),
};
</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 />
      </v-col>
    </v-row>

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

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

export default {
  name: "List",

  components: {
    Search,
    CardList,
  },
};
</script>

Answer 1

您可以将 v-data-table 的 search 属性绑定到您的 v-text-field 的 v-model。

所以如果你有：

<v-text-field v-model="searchInput"/>

其中searchInput是本地数据对象，可以绑定这个对象：

<v-data-table :search="searchInput"/>

更新：从您添加的代码来看，它们都在不同的文件中。似乎您需要为 table 组件提供一个道具。并从文本字段组件向父组件发出自定义事件，搜索输入将在父组件中更新。这是正确的代码：

CardList.vue

<template>
  <v-container>
      <v-data-table
        :headers="headers"
        :items="users"
        :search="search"
        hide-default-footer
        class="elevation-1"
      >
        <template v-slot:[`item.datos_paciente.nombre`]="{ item }"
          >{{ item.datos_paciente.nombre }}
          {{ item.datos_paciente.apellidos }}</template
        >
        <template v-slot:[`item.ficha_dental.estado`]="{ item }">
          <v-chip :color="getColor(item.ficha_dental.estado)" dark>
            {{ item.ficha_dental.estado }}
          </v-chip>
        </template>
        <template v-slot:[`item.options`]>
          <v-select v-model="selectDefault" :items="drop"></v-select>
        </template>
      </v-data-table>
      <div class="text-center pt-2">
        <v-pagination v-model="page" :length="pageCount"></v-pagination>
      </div>
    </v-card>
  </v-container>
</template>

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

export default {
  name: "CardList",
  props: {
    search: String,
  },
  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" },
      ],
    };
  },

Search.vue

<template>
  <v-form>
    <v-text-field
      outlined
      filled
      append-icon="mdi-magnify"
      color="blue"
      placeholder="Buscar..."
      @input="$emit('updateSearch', $event)"
    ></v-text-field>
  </v-form>
</template>

<script>
export default {
  name: "Search",

  data: () => ({}),
};
</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 @updateSearch="searchText = $event"/>
      </v-col>
    </v-row>

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

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

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

使用外部搜索验证数据 table？

Vuetify data table with external search?

html

javascript

json

vue.js

vuetify.js

更新