JavaScript-Vuetify数据表与外部搜索？-堆栈溢出

顺晟科技

2022-10-19 12:31:46

我有vuetify的v-data-table组件，默认情况下，您可以在其属性中添加筛选条。此表从本地json获取数据，目前为止还不错。

当此表外部有一个组件时，问题就来了，该组件是用（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-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" },
      ],
    };
  },

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

顺晟科技：

您可以将的道具绑定到您的。

所以如果您有:

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

如果是本地数据对象，则可以绑定此对象:

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

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

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

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

上一篇：JavaScript-在没有表单堆栈下一篇：JavaScript-如何使用<i>

网站建设

Html

JavaScript-Vuetify数据表与外部搜索？-堆栈溢出

更新