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 = ['上海', '北京', '广州', '深圳'];
  export default {
    data() {
      return {
        checkAll: false,
        checkedCities: ['上海', '北京'], //选中的内容
        cities: cityOptions,//所有的内容
        isIndeterminate: true
      };
    },
    methods: {
      handleCheckAllChange(val) {
        this.checkedCities = val ? cityOptions : [];//按照这种写法每次切换页面从新选的时候。只能保存当前的页面选中的。其他页面选中的就没有考虑。因为如果全选以后再点取消，this.checkedCities=[];但是其他页面可能也有选中的，这个相当于把其他页面选中的也都取消了。这个肯定不对的。
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;//这里是判断选中的是否是所有的内容。应该根据当前页面选中的个数和当前页的总的个数。
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      }
    }
  };

样式主要是根据indeterminate，checkAll这两个决定的。

indeterminate=true；样式是。

indeterminate=false；样式

checkAll=true ;选中所有

checkAll=false;没有选中

所以我们可以总结出:

全选  checkAll=true ;isIndeterminate= false;

部分选中 checkAll=true;indeterminate=true；或者checkAll=false;indeterminate=true；

全不选 checkAll=false;indeterminate=false；

然后我的思路是：把checkAll和indeterminate存起来。page页码作为键。这两个数作为值。

点击某一页的时候就之间找到对应页码的checkAll和indeterminate啦。

 

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

<el-pagination layout="prev,total, pager, next,jumper" @current-change="handleCurrentChange" :current-page.sync="page" :page-size="10" :total="total" style="float:right;">

  </el-pagination>

</template>
<script>
  const cityOptions = ['上海', '北京', '广州', '深圳'];
  export default {
    data() {
      return {
        checkAll: false,
        checkedCities: ['上海', '北京'], //当前页面选中的内容
        cities: cityOptions,//所有的内容
        isIndeterminate: true,

         resourceLists:[],//接口获取的当前页面的所有的内容

         page:'',//页码

        checkedAll:[],//存放所有页面选中的和checkedCities一样，他先处理了再赋值给checkedCities

                 allcheckAll:{},//page键，值是checkAll是否全选。

                allchosedisIndeterminate:{},//page是键，isIndeterminate值

     
      };
    },
    methods: {

//全选
      handleCheckAllChange(val) {//val值是true/false

             this.checkedCities= val ? this.resourceLists: [];

             if(val==true){//全选。把选中的添加到checkedAll中

                    this.checkedAll=this.checkedAll.concat(this.checkedCities);    

                }else{//全不选。checkedAll去掉当前页选中的

                    this.checkedAll = this.checkedAll.filter(function (item) {

                          return allresid.indexOf(item) < 0;

                          })

                }
            this.checkedCities =[...new Set(this.checkedAll)];
            this.isIndeterminate = false;
      },

//单选
      handleCheckedCitiesChange(value) {

                  var num=0;//num当前页选中的数量

                this.resourceLists.forEach((res,index)=>{//this.resourceLists当前页

                    this.checkedCities.forEach((res1,index1)=>{// this.checkedCities所有选中的内容

                        if(res==res1){

                            num++;

                        }

                    })

                })

        let checkedCount = num;
        this.checkAll = checkedCount === this.resourceLists.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.resourceLists.length;

                 this.allcheckAll[this.page]=this.checkAll;

                this.allchosedisIndeterminate[this.page]=this.isIndeterminate;

      }
    }，

  //          切换页码

            handleCurrentChange(val) {

                this.checkAll = false;

                this.isIndeterminate = false;

                this.ischeck = true;

                if(this.allcheckAll[this.page]!=undefined){//全选的状态取存起来

                    this.checkAll=this.allcheckAll[this.page];

                    this.isIndeterminate = this.allchosedisIndeterminate[this.page];

                }

 

                this.page = val;

                this.getResourceAuditLists();//这是获取页面内容的函数

            },

  };