解决el-table在前端分页情况下使用 <el-pagination>的slot进行显示勾选个数导致的el-table无法勾选的问题

导致的问题:

在前端分页的情况:解决el-table在前端分页情况下使用 <el-pagination>的slot进行显示勾选个数导致的el-table无法勾选的问题_第1张图片
在el-pagination的slot显示表格勾选的个数:解决el-table在前端分页情况下使用 <el-pagination>的slot进行显示勾选个数导致的el-table无法勾选的问题_第2张图片在这里插入图片描述

直接导致表格数据的复选框无法勾选:
解决el-table在前端分页情况下使用 <el-pagination>的slot进行显示勾选个数导致的el-table无法勾选的问题_第3张图片
如果去掉前端分页,可以正常显示勾选数目,table也可以正常勾选。如果去掉el-pagination的slot显示的勾选个数,table可以正常勾选。

解决方案:
经过辛苦排查,发现只要把前端分页放在compute里面进行,就可以解决这个问题。最终满足前端分页、显示勾选个数、表格也可以正常勾选。

改良后的写法:
解决el-table在前端分页情况下使用 <el-pagination>的slot进行显示勾选个数导致的el-table无法勾选的问题_第4张图片
在这里插入图片描述
具体原理还没搞清楚。希望此解决方案能给遇到同样问题你带来帮助。如果有知道原理的欢迎留言。谢谢

你可能感兴趣的:(JavaScript/ES6,Vue2.x,vue,vue.js,前端)