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

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

### 实现 `el-table` 组件在分页情况下的并清除已中状态 为了实现 `el-table` 的分页功能,并能够在特定条件下清除已中的项,可以按照如下方法操作: #### 设置保留择项的功能 通过配置 `el-table` 和 `el-table-column` 来启用跨页面的记忆功能。这需要两个属性的支持: - 在 `<el-table>` 中添加 `:row-key="id"` 属性来指定唯一键名用于区分每一行记录[^1]。 - 在 `<el-table-column type="selection">` 添加 `:reserve-selection="true"` 属性以保持用户的择不会因为翻页而丢失[^2]。 ```html <el-table :data="tableData" border style="width: 95%" @selection-change="handleSelectionChange" row-key="id"> <el-table-column type="selection" align="center" width="55" :reserve-selection="true"></el-table-column> </el-table> ``` #### 提供自定义的方法处理清除逻辑 要实现在某些场景下(比如点击按钮或其他交互行为)清除当前所有的中项,则可以通过调用 `clearSelection()` 方法完成此目的。这个 API 是由 Element UI 自身提供的,可以直接作用于 table 实例上[^3]。 ```javascript // 假设有一个名为 clearAllSelected 的函数用来执行清除动作 function clearAllSelected() { const tableRef = this.$refs.table; if (tableRef) { tableRef.clearSelection(); } } ``` 需要注意的是,在 Vue3 版本里可能还需要额外考虑响应式的更新机制以及生命周期钩子的影响;而在 Vue2 下则相对简单一些[^4]。 对于更复杂的业务需求,如动态加载数据源时重置择列表等情形,建议结合实际应用场景调整上述策略的应用方式。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值