vue,elementui table组件多选框数据回显,前端假分页

应用场景:从后端请求一次性拿到所有的数据,前端进行假分页;当勾选或去掉多选框,切换分页的时候,勾选上和去掉的数据需要回填上;具体如下:


vue,elementui table组件多选框数据回显,前端假分页_第1张图片
image.png

具体实现代码如下:
1、通过接口拿到所有的数据,进行假分页


vue,elementui table组件多选框数据回显,前端假分页_第2张图片
请求拿到数据

2、渲染页面中需要用到的方法和数据


vue,elementui table组件多选框数据回显,前端假分页_第3张图片
定义的data

vue,elementui table组件多选框数据回显,前端假分页_第4张图片
表格多选框勾选方法

vue,elementui table组件多选框数据回显,前端假分页_第5张图片
分页方法

3、表格多选框勾选方法:handleSelectionImportChange


image.png

4、分页方法:handleImportCurrentChange
这也是最主要的方法,每次分页要回填当前页已经选中的数据


vue,elementui table组件多选框数据回显,前端假分页_第6张图片
image.png

5、最后multipleImportSelectionAll中的值就是所有选中的数据
输出的结果为:


vue,elementui table组件多选框数据回显,前端假分页_第7张图片
结果显示

你可能感兴趣的:(vue,elementui table组件多选框数据回显,前端假分页)