vue穿梭框实现
实现 Vue 穿梭框组件
穿梭框（Transfer）是常见的 UI 组件，用于在两栏之间移动选项。以下是基于 Vue 的实现方案：
基础结构设计
使用两个列表（左侧和右侧）和操作按钮实现数据双向绑定：
<template>
<div class="transfer">
<div class="transfer-list">
<h4>源列表</h4>
<ul>
<li v-for="item in leftData" :key="item.value">
<input type="checkbox" v-model="item.checked">
{{ item.label }}
</li>
</ul>
</div>
<div class="transfer-buttons">
<button @click="moveToRight"> > </button>
<button @click="moveToLeft"> < </button>
</div>
<div class="transfer-list">
<h4>目标列表</h4>
<ul>
<li v-for="item in rightData" :key="item.value">
<input type="checkbox" v-model="item.checked">
{{ item.label }}
</li>
</ul>
</div>
</div>
</template>核心逻辑实现
数据模型和移动操作方法：
<script>
export default {
data() {
return {
leftData: [
{ label: '选项1', value: 1, checked: false },
{ label: '选项2', value: 2, checked: false }
],
rightData: []
}
},
methods: {
moveToRight() {
this.leftData = this.leftData.filter(item => {
if (item.checked) {
this.rightData.push({...item, checked: false})
return false
}
return true
})
},
moveToLeft() {
this.rightData = this.rightData.filter(item => {
if (item.checked) {
this.leftData.push({...item, checked: false})
return false
}
return true
})
}
}
}
</script>样式优化
添加基础样式增强用户体验：
<style scoped>
.transfer {
display: flex;
align-items: center;
gap: 20px;
}
.transfer-list {
border: 1px solid #dcdfe6;
width: 200px;
height: 300px;
overflow-y: auto;
}
.transfer-buttons {
display: flex;
flex-direction: column;
gap: 10px;
}
</style>高级功能扩展
- 全选/反选功能：
methods: {
toggleAll(list, checked) {
list.forEach(item => {
item.checked = checked
})
}
}- 搜索过滤功能：
<input v-model="searchText" placeholder="搜索...">
computed: {
filteredLeftData() {
return this.leftData.filter(item =>
item.label.includes(this.searchText)
)
}
}- 自定义插槽支持：
<slot name="item" v-bind="{ item }">
{{ item.label }}
</slot>性能优化建议
- 大数据量时使用虚拟滚动
- 添加动画过渡效果
- 使用计算属性减少重复计算
完整实现可根据项目需求选择以上功能组合，核心思路是通过数据驱动视图更新，保持左右两侧数据的同步。
