element-ui 组件的 table 多选,翻页有记忆功能

不想你离开。 提交于 2019-12-03 00:13:39

需求(这样的需求挺无赖的。。。):

  1. 表格多选
  2. 支持翻页
  3. 支持当前页全选

    注:翻页时需要把上一次当前页点击的选项选中, 可以实现但是性能不好(每次点击都需要双重循环)。

效果如下:

这里写图片描述

思路:

  1. 数组 allSelected 保存已经选择的
  2. 数组 hasSelected 保存当前页选择的
  3. 在翻页的时候 将 hasSelected 在 allSelected 里面的去重, 再将剩下的 allSelected.push(hasSelected)

方法: 单击事件和全选事件

一、 单击事件,2个参数(selection,row):

  1. selection: 当前页所有打钩的
  2. row: 当前点击的行
    通过这两个参数可以判断,当前点击是打钩还是取消打钩

二、 全选/取消全选,1个参数(selection):

  1. selection 所有打钩的
    通过 length 可以判断,当前点击是全选还是取消全选
for(var i = hasSelected.length-1; i >=0; i--){
   for(var k = 0; k < mangerDatas.length; k++){
        if(hasSelected[i].id == mangerDatas[k].id){
            hasSelected.splice(i,1);
            break;
        }
    }
};

实现打钩:

this.$refs.multipleTable.toggleRowSelection(数据)

this.$refs.multipleTable.toggleRowSelection(this.$store.state.mangerDatas[i]);
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!