vue3 表格穿梭框组件

原文请关注vx公众号：酒粮人僧快码
原文地址：https://mp.weixin.qq.com/s/ZGIGPfFcUq1Xt2bIkdsiNQ

运行系统：windows 10

运行终端：Goodle Chrome(谷歌) 浏览器

开发框架：vue3 +vxe-table4.5.19

开发环境：nodeJS v20.17.0

nvm 版本：1.1.12

原文请关注vx公众号：酒粮人僧快码
原文地址：https://mp.weixin.qq.com/s/ZGIGPfFcUq1Xt2bIkdsiNQ

组件概述

这是一个高度可定制的双表格数据转移组件，具有以下特点：

双表格设计：左侧显示可选数据，右侧显示已选数据

灵活配置：支持本地数据和远程加载两种模式

完善交互：提供分页、搜索、全选等功能

丰富事件：支持数据变化、选中变化等事件通知

高度可定制：可通过插槽自定义表格列

原文请关注vx公众号：酒粮人僧快码
原文地址：https://mp.weixin.qq.com/s/ZGIGPfFcUq1Xt2bIkdsiNQ

transfer-table.vue

原文请关注vx公众号：酒粮人僧快码
原文地址：https://mp.weixin.qq.com/s/ZGIGPfFcUq1Xt2bIkdsiNQ

组件API文档

原文请关注vx公众号：酒粮人僧快码
原文地址：https://mp.weixin.qq.com/s/ZGIGPfFcUq1Xt2bIkdsiNQ

使用示例

1. 基础使用示例

说明：

最简单的使用方式，只需传入数据源sourceData

通过update:leftData和update:rightData事件监听数据变化

使用默认的表格列配置和分页设置

2. 远程数据加载示例

说明：

设置remote属性启用远程模式

必须提供loadMethod方法用于加载数据

可以通过pagination和searchParams控制分页和搜索

通过error事件处理错误情况

3. 自定义表格列示例

说明：

使用#left-table-columns和#right-table-columns插槽自定义表格列

可以自由添加、删除或修改列

支持在列中添加自定义内容和操作按钮

完全控制表格列的显示和布局

4. 完整表单集成示例

说明：

完整展示了如何将转移表格集成到表单中

包含表单验证、数据提交和重置功能

展示了如何将组件与Element Plus表单结合使用

提供了完整的数据处理和错误处理示例

原文请关注vx公众号：酒粮人僧快码
原文地址：https://mp.weixin.qq.com/s/ZGIGPfFcUq1Xt2bIkdsiNQ