Блог

Я попытался использовать select all (в качестве флажка), чтобы выбрать все результаты, которые я ищу, но все равно были выбраны все данные в таблице, и я использую employee.map для циклического выбора всех данных в таблице. Кто-нибудь может мне помочь?

вот мой код :

 <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>
 

если есть что-то, что я сделал не так, больше, чем я ожидал. Я прошу прощения. и спасибо, что помогли мне.

Я не уверен в том, что вы хотите сделать, хотите ли вы, чтобы этот флажок использовался для выбора сотрудников, или если этот флажок представляет данные о сотруднике (например: вакцинирован)

Если вы хотите выбрать сотрудников: Вы можете использовать API таблицы v-данных: Добавьте v-модель и выберите «Показать» в таблицу v-данных:

         <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-таблицей:

 <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>

 

Скажите мне, было ли это тем решением, которого вы ожидали