但是我们在具有选择功能的 el-table 的时候,会遇到一个问题,在点击进行分页之后,之前选择的数据没了,这个问题真的是困扰我良久。 在后面的我又开始面向百度开发,找到一个没有 bug 的方法这个方法是: 在el-table 中,通过 @selection-change=“handleRowSelection” 和 :row-key=“getRowKeys”, 在第一行,也就...
在el-table组件中添加type="selection"属性来启用勾选功能。 在分页切换时保存已勾选的记录: 监听el-table的selection-change事件,当勾选状态发生变化时,将当前页的勾选状态保存到某个地方(如Vuex、LocalStorage或组件的data中)。 在切换回之前分页时,恢复已勾选的记录: 监听el-pagination的current-change事件,当...
tableData.value = [ { id: 3, name: "3" }, { id: 4, name: "4" }, ]; } loading.value = false; // 等待tableData.value被赋值,DOM更新后再设置默认勾选 nextTick(() => { toggleSelection(tableData.value); }); }, 500); }; const toggleSelection = (rows) => { if (!rows) ...
//选择改变 handleSelectionChange(e) { this.selectedArray = e }, //编辑时设置默认选中,很简单,循环选中的对象集合,调用方法设置成true //设置默认选中setCheckedItem(array) {this.selectedArray =arrayfor(let item ofthis.selectedArray) {this.$refs.userTable.toggleRowSelection(item, true)} },...
分页多选,分页进行切换的时候,ids存储 <el-table height="calc(100vh - 280px)" :data="infoList" @select="handleSelectionChange" ref="multipleTable" @row-click="clickRow" @select-all="clickAll"> </el-table> 1、@select="handleSelectionChange":多选的时候函数:传两个参数,selection和row,判断当...
reserve-selection;当这两个属性同时使用时就能实现我们的需求不能重置我们的选择 总结一下:跳转页不重置我们的选择 1、row-key="id" 2、reserve-selection 当然你想要获取到选择的数据就需要用到selection-change的这个方法了 接下来咱们说一说这个el-table-column上面使用v-if指令的问题 ...
```javascript const selectedMap = new Map(); handleSelectionChange(val) { // val 表示当前勾选项,属于array类型 // 我们首选需要一个list用来记录当前tableData都有哪些备选哪些没有被选上,我这里先用一个map记录当前表格中的备选项 // 然后遍历tableData 把已选项维护到一个list中 const currSelectMap ...
</el-table> ``` 选择selection-change ,它会把当前页码的勾选项列出来。 接下来就是它对应的handle函数了,我把处理逻辑用备注的形式写出来 ```javascript const selectedMap = new Map(); handleSelectionChange(val) { // val 表示当前勾选项,属于array类型 ...
简介: Element-Plus 表格 el-table 如何支持分页多选 代码在el-table-column 设置属性 reserve-selection 为 true 即可,代码如下<el-table ref="tableRef" v-loading="loading" :data="list" row-key="id" @selection-change="handleSelectionChange" ...
2.需要表格属性“row-key”的配合,在使用 reserve-selection 功能的情况下,该属性是必填的。将row-key设置为表格中唯一的字段名称(例如programId)。这样就实现了后端分页在翻页或切换条数时,记住之前的复选框选项。 <el-table:data="tableData":row-key="getRowKey"@selection-change="handleSelectionChange"><el...