2021-4-30 更新
element 已更新属性 reserve-selection 可实现翻页记忆回勾,
关键属性:

  • row-key=“id”
  • :reserve-selection=“true”
    在这里插入图片描述
    使用:
    在这里插入图片描述在这里插入图片描述–end
    // ======================== 废弃 start ======================

需求:

  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]);

// ========================= 废弃 end ======================

GitHub 加速计划 / eleme / element
15
3
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45 1 年前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐