Vue 2 v-data-table 如何仅选中搜索返回的匹配结果

核心问题是原有全选逻辑遍历的是完整的employee数据源，没有和v-data-table的搜索过滤结果联动。Vuetify的v-data-table会将搜索匹配后的结果存在实例的filteredItems属性中，只需基于该属性做全选逻辑即可，具体修改如下：

修改步骤 #

1. 给v-data-table添加ref属性，方便获取组件实例
2. 给全选复选框绑定v-model和change事件，替换原有的click事件，更符合复选框交互逻辑
3. 调整全选方法，仅遍历当前搜索过滤后的项进行选中状态修改
4. 新增状态同步逻辑，搜索内容变化、子项选中状态变化时自动同步全选框的选中状态

完整修改后代码 #

<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
          ref="empTable"
          :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
          v-model="selectAll"
          label="Select All"
          style="direction: rtl"
          @change="handleSelectAll"
        ></v-checkbox>
      </v-col>
    </v-row>
  </div>
</template>

<script>
export default {
  data: () => ({
    singleSelect: false,
    selected: [],
    search: '',
    selectAll: false,
    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()
    },
    // 搜索内容变化时同步全选框状态
    search() {
      this.selectAll = this.isAllFilteredSelected
    },
    // 子项选中状态变化时同步全选框状态
    'employee': {
      handler() {
        this.selectAll = this.isAllFilteredSelected
      },
      deep: true
    }
  },
  created() {
    this.initialize()
  },
  computed: {
    // 判断当前过滤后的项是否全部选中
    isAllFilteredSelected() {
      const filteredList = this.$refs.empTable?.filteredItems || []
      if (!filteredList.length) return false
      return filteredList.every(item => item.check)
    }
  },
  methods: {
    handleSelectAll(val) {
      // 仅操作当前搜索过滤后展示的项
      const filteredList = this.$refs.empTable?.filteredItems || []
      filteredList.forEach(item => {
        item.check = val
      })
    },
    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>

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