element ui transfer 穿梭框 分页实现,接口获取、更新数据

使用穿梭框数据量大时需要分页,官方的组件并不能满足需求。数据大时不分页一次渲染页面卡。通过重新修改官方源码、封装实现分页。

1、新建TransferPanel 组件,根据官方源码修改适配




2、封装Transfer组件,根据官方源码修改适配




3、引用



在原有props基础上 添加了 left 左侧数据 right 右侧数据 事件  page-change(当前页改变)、query-change(查询条件改变)、checked-change(选中改变)、bind(绑定、解绑),返回的参数(key,val) key :left/right 区分左右 val: 改变的值。在bind中 val: true/false  绑定、解绑

示例是在弹框中引用的所以监听显示visible 值,显示时加载左右数据,如果是页面在mounted里加载左右数据

4、效果

element ui transfer 穿梭框 分页实现,接口获取、更新数据_第1张图片

 element ui transfer 穿梭框 分页实现,接口获取、更新数据_第2张图片

element ui transfer 穿梭框 分页实现,接口获取、更新数据_第3张图片

element ui transfer 穿梭框 分页实现,接口获取、更新数据_第4张图片

 element ui transfer 穿梭框 分页实现,接口获取、更新数据_第5张图片

 

 

 

你可能感兴趣的:(elementui,vue,elementui,transfer,穿梭框,分页)