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

墨蓝 2023-02-09 14:12 15阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70][]

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

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

1.勾选全部 ![20200519111855516.png][]

2.勾选了部分内容  ![20200519111919987.png][]

3.没有选任何内容 ![20200519111945273.png][]

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

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

如果a<b ,勾选了部分

如果a=0.没有勾选。

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

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

indeterminate=true；样式是![20200519113004132.png][]。

indeterminate=false；样式![20200519113012345.png][]![20200519114611987.png][]

checkAll=true ;选中所有![20200519113317105.png][]

checkAll=false;没有选中![20200519113012345.png][]

所以我们可以总结出:

全选  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();//这是获取页面内容的函数
> 
>             \},
> 
>   \};

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200519111232464.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0,size_16,color_FFFFFF,t_70
[20200519111855516.png]: https://img-blog.csdnimg.cn/20200519111855516.png
[20200519111919987.png]: https://img-blog.csdnimg.cn/20200519111919987.png
[20200519111945273.png]: https://img-blog.csdnimg.cn/20200519111945273.png
[20200519113004132.png]: https://img-blog.csdnimg.cn/20200519113004132.png
[20200519113012345.png]: https://img-blog.csdnimg.cn/20200519113012345.png
[20200519114611987.png]: https://img-blog.csdnimg.cn/20200519114611987.png
[20200519113317105.png]: https://img-blog.csdnimg.cn/20200519113317105.png