有哪些教育网站做的比较好,北京做网站好的公司,在哪里建网站,做几个小网站还是做一个大网站el-table表格多选时#xff0c;只需要添加typeselection#xff0c; row-key及selection-change#xff0c;如果存在分页时需要加上reserve-selection#xff0c;这里就不写具体的实现方法了#xff0c;可以查看我之前的文章#xff0c;这篇文章主要说一下存…el-table表格多选时只需要添加typeselection row-key及selection-change如果存在分页时需要加上reserve-selection这里就不写具体的实现方法了可以查看我之前的文章这篇文章主要说一下存在的问题。
问题
1.进入列表勾选表格第1页的一条数据然后切换进入第2页再勾选一条数据 如上图每页分别勾选了一条数据然后保存
2.再点击编辑进入后不要点击第二页直接在第一页上在勾选一条数据然后保存你会发现第二页的数据消失了。如果先点击切换进入第二页再点击保存就没问题了
疑问这是什么情况为什么会这样呢
因为表格是存在分页初始化进去的时候只加载了第一页的数据后面页面的数据是拿不到的el-table组件只会存第一页选中的当你点击一下第二页的时候selection-change的参数就正常了
如果解决
那肯定是有方法解决的使用toggleRowSelection方法把数据硬塞进去
this.$nextTick(() {// this.multipleSelection第一页和第二页选中的数据数组, this.tableList是表格数据if (this.multipleSelection.length) {// this.$refs.elTable 当前表格refthis.$refs.elTable.clearSelection()this.multipleSelection.forEach(row {const selectedRow this.tableList.find(item item.id row.id)if(selectedRow){// 当前页(第一页)需要被选中的数据使其选中this.$refs.elTable.toggleRowSelection(selectedRow, true);}else{// 不在当前页(第二页)的数据也硬塞到selection-change的参数中这时当你在第一页选中其他数据时selection-change的参数也会带着第二页的数据this.$refs.elTable.toggleRowSelection(row, true);}})}
})这里使用了vue2的代码解释如果需要vue3的直接修改即可原理一样的
