Transfer 穿梭框

规则

基础示例

Props 配置示例

可搜索

单项禁用（不可勾选）

Events 示例

Props

名称	类型	默认值	说明
button-texts	string[]	[]	自定义左右穿梭按钮文案
columns	IColumnConfig	—	table 模式下表格列配置
data	ITransferData[]	[]	左右列表全量数据源
drop-config	IDropConfig	—	列表项可拖拽参数
filter-method	(query: string, item: object) => boolean	—	搜索过滤函数
filter-placeholder	string	—	搜索占位
filterable	boolean	false	是否启用搜索
format	object	{ noChecked:'${checked}/${total}', hasChecked: '${checked}/${total}' }	顶部勾选状态文案
left-columns	IColumnConfig	—	table 模式左侧列配置
left-default-checked	string[]	[]	默认左侧已勾选 key 数组
pager-op	IPagerOp	{ mode: 'fixed',pageVO:	table 模式分页配置
panel-body-style	Object	—	面板内容区域样式
panel-style	Object	—	左右面板容器样式
panel-table-height	String	—	嵌套表格高度
props	{key: string, label: string, disabled: string}	—	数据源字段别名映射
render	Table | Tree	—	渲染类型
render-content	(h: Vue.h, item: any) => vnode	—	自定义渲染函数
right-columns	IColumnConfig	—	table 模式右侧列配置
right-default-checked	string[]	[]	默认右侧已勾选 key 数组
show-all-btn	boolean	false	是否显示全部移动按钮
show-pager	boolean	false	table 模式是否显示分页
target-order	'original' | 'push' | 'unshift'	'original'	右侧插入排序策略
titles	string[]	[]	自定义列表标题
to-left-disable	boolean	true	初始化未选中时左按钮禁用
to-right-disable	boolean	true	初始化未选中时右按钮禁用
tree-op	Tree props	—	tree 模式树配置
v-model / modelValue	string[]	[]	右侧列表 key 数组

Events

名称	类型	说明
change	(value: string[], move: string, keyArray: string[]) => void	右侧列表变化触发
left-check-change	(checked: string[], statusChanged: string[]) => void	左侧选择触发
right-check-change	(checked: string[], statusChanged: string[]) => void	右侧选择触发