element-ui 怎么实现分页全选当前页。切换页码的时候保存选择状态

我的全选当前页。只有一个。当页码切换的时候。页面的内容会根据接口显示刷新成新的数据。但是全选当前页状态没有变化

全选当前页按钮有三个状态

1.勾选全部   

2.勾选了部分内容   

3.没有选任何内容

 

所以我们可以根据当前页面选中的内容数量a和接口获取的当前页面所有的内容数量b做比较。

如果数量一样a=b。那么就是勾选全部。

如果a<b ,勾选了部分

如果a=0.没有勾选。

下面是官网的例子。我们来说说要对他做哪些改进：

<template>
  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
  <div style="margin: 15px 0;"></div>
  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
    <el-checkbox v-for="city in cities" :label="city" :key="city">{ {city}}</el-checkbox>
  </el-checkbox-group>

</template>
<script>
  const cityOptions = ['上海', '北