举例 vue 全选与分页的兼容问题

在 Vue 中，进行全选与分页的兼容问题主要是在处理分页切换时全选状态的保持。当用户选择全选时，如果切换到下一页或其他页码，需要保持之前选中的项仍然处于选中状态。以下是一个示例：

<template>
  <div>
    <input type="checkbox" v-model="selectAll" @change="selectAllItems">
    <label for="selectAll">全选</label>

    <ul>
      <li v-for="item in displayedItems" :key="item.id">
        <input type="checkbox" v-model="selectedItems" :value="item.id">
        <label>{{ item.name }}</label>
      </li>
    </ul>

    <button @click="previousPage" :disabled="currentPage === 1">上一页</button>
    <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        // ...more items
      ],
      selectedItems: [],
      selectAll: false,
      currentPage: 1,
      itemsPerPage: 3
    };
  },
  computed: {
    displayedItems() {
      const startIndex = (this.currentPage - 1) * this.itemsPerPage;
      const endIndex = startIndex + this.itemsPerPage;
      return this.items.slice(startIndex, endIndex);
    },
    totalPages() {
      return Math.ceil(this.items.length / this.itemsPerPage);
    }
  },
  methods: {
    selectAllItems() {
      if (this.selectAll) {
        this.selectedItems = this.items.map(item => item.id);
      } else {
        this.selectedItems = [];
      }
    },
    previousPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    }
  }
};
</script>

在上述示例中，`items` 数组包含所有的选项，`selectedItems` 数组用于存储选中的项的 ID。通过 `v-model` 双向绑定，可以实现全选和单个项的选择。

当用户选择全选时，`selectAllItems` 方法会将 `selectedItems` 数组设置为所有项的 ID。当用户取消全选时，会清空 `selectedItems` 数组。

在分页切换时，通过计算属性 `displayedItems` 获取当前页要显示的项。`previousPage` 和 `nextPage` 方法用于切换页码。

这样，无论用户如何切换分页，之前选中的项将保持选中状态。