vue穿梭框实现
Vue穿梭框实现
Vue穿梭框（Transfer）是一种常见的UI组件，用于在两个列表之间移动项目。以下是实现穿梭框的几种方法：
使用Element UI的Transfer组件
Element UI提供了现成的Transfer组件，可以快速实现穿梭框功能。安装Element UI后，直接使用el-transfer组件：
<template>
<el-transfer
v-model="selectedItems"
:data="allItems"
:titles="['可选列表', '已选列表']"
:button-texts="['移除', '添加']"
@change="handleChange">
</el-transfer>
</template>
<script>
export default {
data() {
return {
allItems: [
{ key: 1, label: '选项1' },
{ key: 2, label: '选项2' }
],
selectedItems: []
}
},
methods: {
handleChange(value, direction, movedKeys) {
console.log(value, direction, movedKeys)
}
}
}
</script>自定义实现穿梭框
如果需要更灵活的控制，可以手动实现穿梭框逻辑：
<template>
<div class="transfer-container">
<div class="list">
<h3>可选列表</h3>
<div v-for="item in leftItems" :key="item.key">
<input type="checkbox" v-model="item.checked">
{{ item.label }}
</div>
</div>
<div class="buttons">
<button @click="moveToRight">→</button>
<button @click="moveToLeft">←</button>
</div>
<div class="list">
<h3>已选列表</h3>
<div v-for="item in rightItems" :key="item.key">
<input type="checkbox" v-model="item.checked">
{{ item.label }}
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
leftItems: [
{ key: 1, label: '选项1', checked: false },
{ key: 2, label: '选项2', checked: false }
],
rightItems: []
}
},
methods: {
moveToRight() {
this.rightItems = [
...this.rightItems,
...this.leftItems.filter(item => item.checked)
]
this.leftItems = this.leftItems.filter(item => !item.checked)
},
moveToLeft() {
this.leftItems = [
...this.leftItems,
...this.rightItems.filter(item => item.checked)
]
this.rightItems = this.rightItems.filter(item => !item.checked)
}
}
}
</script>
<style>
.transfer-container {
display: flex;
}
.list {
width: 200px;
border: 1px solid #ddd;
padding: 10px;
}
.buttons {
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 10px;
}
</style>使用第三方库
除了Element UI，还可以考虑以下Vue穿梭框组件库：
vue-transfer-dom：轻量级解决方案v-transfer：功能丰富的穿梭框组件ant-design-vue的Transfer组件
安装后按照各自文档使用即可。
功能扩展建议
基础穿梭框实现后，可以考虑添加以下功能：
- 搜索过滤功能
- 全选/反选操作
- 拖拽排序支持
- 异步数据加载
- 自定义渲染模板
穿梭框的实现核心在于管理两个列表之间的数据转移，根据项目需求选择合适的实现方式，Element UI的方案适合快速开发，自定义实现则更灵活可控。
