Vue 2：如何 select 只是 v-data-table 中的搜索结果

Question

我尝试使用 select 全部（作为一个复选框）到 select 所有我搜索的结果，但它仍然 selected [=25= 中的所有数据] 并且我使用 employee.map 循环 selection table 中的所有数据。有人可以帮助我吗？

这是我的代码 :

<template>
  <div>
    <v-container>
      <v-row>
        <v-col cols="12" md="6" sm="8">
          <v-text-field
            v-model="search"
            append-icon="mdi-magnify"
            label="Search"
            single-line
            hide-details
          ></v-text-field>
        </v-col>
      </v-row>
    </v-container>
    <v-row>
      <v-col cols="12" sm="12" md="12">
        <v-data-table
          :headers="headers"
          :items="employee"
          :single-select="singleSelect"
          item-key="empname"
          :search="search"
          :sort-by="['check', 'id']"
          :sort-desc="true"
          class="elevation-1"
        >
          <template v-slot:item.check="{ item }">
            <v-simple-checkbox v-model="item.check"></v-simple-checkbox>
          </template>
        </v-data-table>
      </v-col>
    </v-row>

    <v-row>
      <v-col cols="12" sm="12" md="12">
        <v-checkbox
          label="Select All"
          style="direction: rtl"
          @click="allSelected()"
        ></v-checkbox>
      </v-col>
    </v-row>
  </div>
</template>

<script>
export default {
  data: () => ({
    singleSelect: false,
    selected: [],
    search: '',
    headers: [
      {
        text: 'ID',
        align: 'start',
        value: 'id',
      },
      { text: 'Employee Name', value: 'empname', sortable: false },
      { text: 'Job', value: 'job', sortable: false },
      { text: 'Check', value: 'check', sortable: false, align: 'center' },
    ],
    employee: [],
  }),

  watch: {
    dialog(val) {
      val || this.close()
    },
    dialogDelete(val) {
      val || this.closeDelete()
    },
  },
  created() {
    this.initialize()
  },

  methods: {
    allSelected() {
      this.employee.map((emp) => {
        emp.check = !emp.check
        console.log(emp.check)
      })
    },
    initialize() {
      this.employee = [
        {
          id: '1',
          empname: 'Joel',
          job:'Doctor',
          check: false,
        },
        {
          id: '2',
          empname: 'Lisa',
          job:'Nurse',
          check: false,
        },
        {
          id: '3',
          empname: 'Vera',
          job:'Doctor',
          check: false,
        },
        {
          id: '4',
          empname: 'Leo',
          job:'Nurse',
          check: false,
        },
      ]
    },
  },
}
</script>

如果我做错了什么超出我的预期。我道歉。谢谢你帮助我。

Answer 1

我不确定你想做什么，如果你想让那个复选框用于 select 员工，或者如果那个复选框代表关于员工的数据（例如：isVaccinated）

如果你想select员工：你可以使用API的v-data-table：添加一个 v-model 和一个 show-select 到 v-data-table:

        <v-data-table
          :headers="headers"
          v-model="selected"
          :items="employee"
          :single-select="singleSelect"
          show-select
          item-key="empname"
          :search="search"
          :sort-by="['check', 'id']"
          :sort-desc="true"
          class="elevation-1"
        >

那你可以删除员工的“check”字段，自定义checkbox，check和uncheck相关的方法，因为你不需要，一切由v-data处理table :

<template>
  <div>
    <v-container>
      <v-row>
        <v-col cols="12" md="6" sm="8">
          <v-text-field
            v-model="search"
            append-icon="mdi-magnify"
            label="Search"
            single-line
            hide-details
          ></v-text-field>
        </v-col>
      </v-row>
    </v-container>
    <v-row>
      <v-col cols="12" sm="12" md="12">
        <v-data-table
          :headers="headers"
          v-model="selected"
          :items="employee"
          :single-select="singleSelect"
          show-select
          item-key="empname"
          :search="search"
          :sort-by="['check', 'id']"
          :sort-desc="true"
          class="elevation-1"
        >
        </v-data-table>
      </v-col>
    </v-row>
  </div>
</template>

<script>
export default {
  data: () => ({
    singleSelect: false,
    selected: [],
    search: "",
    headers: [
      {
        text: "ID",
        align: "start",
        value: "id",
      },
      { text: "Employee Name", value: "empname", sortable: false },
      { text: "Job", value: "job", sortable: false },
    ],
    employee: [],
  }),

  watch: {
    dialog(val) {
      val || this.close();
    },
    dialogDelete(val) {
      val || this.closeDelete();
    },
  },
  created() {
    this.initialize();
  },

  methods: {
    initialize() {
      this.employee = [
        {
          id: "1",
          empname: "Joel",
          job: "Doctor",
        },
        {
          id: "2",
          empname: "Lisa",
          job: "Nurse",
        },
        {
          id: "3",
          empname: "Vera",
          job: "Doctor",
        },
        {
          id: "4",
          empname: "Leo",
          job: "Nurse",
        },
      ];
    },
  },
};
</script>

告诉我这是否是您期望的解决方案

Vue 2：如何 select 只是 v-data-table 中的搜索结果

Vue 2 : how to select just the search results inside v-data-table

javascript

vuejs2

vuetify.js