element-ui 组件 table 多选,翻页有记忆功能
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
2021-4-30 更新
element 已更新属性 reserve-selection 可实现翻页记忆回勾,
关键属性:
- row-key=“id”
- :reserve-selection=“true”
使用:
–end
// ======================== 废弃 start ======================
需求:
- 表格多选
- 支持翻页
- 支持当前页全选
**注:**翻页时需要把上一次当前页点击的选项选中, 可以实现但是性能不好(每次点击都需要双重循环)。
##效果如下:
##思路:
- 数组 allSelected 保存已经选择的
- 数组 hasSelected 保存当前页选择的
- 在翻页的时候 将 hasSelected 在 allSelected 里面的去重, 再将剩下的
allSelected.push(hasSelected)
##方法: 单击事件和全选事件
一、 单击事件,2个参数(selection,row):
- selection: 当前页所有打钩的
- row: 当前点击的行
通过这两个参数可以判断,当前点击是打钩还是取消打钩
###二、 全选/取消全选,1个参数(selection):
- 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
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
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 7 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)