vue穿梭框组件实现

实现基础穿梭框组件

在Vue中实现穿梭框组件，可以使用<el-transfer>（Element UI）或手动实现。以下是手动实现的核心逻辑：

<template>
  <div class="transfer-container">
    <div class="transfer-panel">
      <h3>源列表</h3>
      <ul>
        <li v-for="item in sourceList" :key="item.value">
          <input type="checkbox" v-model="selectedItems" :value="item.value">
          {{ item.label }}
        </li>
      </ul>
    </div>
    <div class="transfer-buttons">
      <button @click="moveToTarget">→</button>
      <button @click="moveToSource">←</button>
    </div>
    <div class="transfer-panel">
      <h3>目标列表</h3>
      <ul>
        <li v-for="item in targetList" :key="item.value">
          <input type="checkbox" v-model="selectedItems" :value="item.value">
          {{ item.label }}
        </li>
      </ul>
    </div>
  </div>
</template>

数据绑定与状态管理

组件需要维护三个核心数据：

• 源数据列表
• 目标数据列表
• 选中项集合

<script>
export default {
  data() {
    return {
      sourceList: [
        { value: 1, label: '选项1' },
        { value: 2, label: '选项2' }
      ],
      targetList: [],
      selectedItems: []
    }
  },
  methods: {
    moveToTarget() {
      this.targetList = [
        ...this.targetList,
        ...this.sourceList.filter(item => 
          this.selectedItems.includes(item.value)
        )
      ]
      this.sourceList = this.sourceList.filter(item => 
        !this.selectedItems.includes(item.value)
      )
      this.selectedItems = []
    },
    moveToSource() {
      // 反向移动逻辑类似
    }
  }
}
</script>

样式优化与交互增强

添加CSS提升用户体验：

.transfer-container {
  display: flex;
  align-items: center;
  gap: 20px;
}
.transfer-panel {
  border: 1px solid #ddd;
  width: 200px;
  height: 300px;
  overflow-y: auto;
}
.transfer-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

高级功能实现

支持搜索过滤和全选功能：

<input v-model="searchQuery" placeholder="搜索...">
<button @click="selectAll">全选</button>

<script>
methods: {
  selectAll() {
    this.selectedItems = this.sourceList.map(item => item.value)
  },
  computed: {
    filteredList() {
      return this.sourceList.filter(item => 
        item.label.includes(this.searchQuery)
      )
    }
  }
}
</script>

与Element UI集成

若使用Element UI，可直接使用内置组件：

<el-transfer
  v-model="targetList"
  :data="sourceList"
  :titles="['源列表', '目标列表']"
  :button-texts="['向右移动', '向左移动']"
></el-transfer>

关键点总结：

• 维护两个独立的数据列表
• 通过复选框管理选中状态
• 实现左右移动的数组操作
• 添加搜索和全选增强体验
• 考虑使用现成UI库加速开发