当前位置：首页 > VUE

vue实现穿梭框

2026-01-08 05:25:24VUE

Vue 穿梭框实现方法

穿梭框（Transfer）是一种常见的UI组件，用于在两个列表之间移动数据项。以下是基于Vue的实现方法。

基础结构搭建

创建两个列表容器和一个操作按钮区域，使用v-model绑定数据源。

<template>
  <div class="transfer-container">
    <div class="list left-list">
      <h3>可选列表</h3>
      <ul>
        <li v-for="item in leftItems" :key="item.id">
          <input type="checkbox" v-model="selectedLeft" :value="item.id">
          {{ item.label }}
        </li>
      </ul>
    </div>

    <div class="operation-buttons">
      <button @click="moveToRight">>></button>
      <button @click="moveToLeft"><<</button>
    </div>

    <div class="list right-list">
      <h3>已选列表</h3>
      <ul>
        <li v-for="item in rightItems" :key="item.id">
          <input type="checkbox" v-model="selectedRight" :value="item.id">
          {{ item.label }}
        </li>
      </ul>
    </div>
  </div>
</template>

数据与逻辑处理

初始化数据并实现移动逻辑，通过计算属性过滤已选和未选项。

<script>
export default {
  data() {
    return {
      allItems: [
        { id: 1, label: '选项1' },
        { id: 2, label: '选项2' },
        { id: 3, label: '选项3' },
        { id: 4, label: '选项4' }
      ],
      selectedLeft: [],
      selectedRight: []
    }
  },
  computed: {
    leftItems() {
      return this.allItems.filter(item => !this.selectedRight.includes(item.id))
    },
    rightItems() {
      return this.allItems.filter(item => this.selectedRight.includes(item.id))
    }
  },
  methods: {
    moveToRight() {
      this.selectedRight = [...this.selectedRight, ...this.selectedLeft]
      this.selectedLeft = []
    },
    moveToLeft() {
      this.selectedRight = this.selectedRight.filter(id => !this.selectedLeft.includes(id))
      this.selectedLeft = []
    }
  }
}
</script>

样式优化

添加基础样式提升用户体验，包括列表布局和按钮交互效果。

<style>
.transfer-container {
  display: flex;
  gap: 20px;
}
.list {
  border: 1px solid #ddd;
  width: 200px;
  height: 300px;
  overflow-y: auto;
}
.operation-buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
button {
  margin: 5px;
  padding: 8px 12px;
}
ul {
  list-style: none;
  padding: 0;
}
li {
  padding: 8px;
  border-bottom: 1px solid #eee;
}
</style>

高级功能扩展

增加搜索过滤和全选功能，提升组件实用性。

<!-- 在列表部分添加搜索框 -->
<div class="list left-list">
  <h3>可选列表</h3>
  <input v-model="leftFilter" placeholder="搜索...">
  <button @click="selectAllLeft">全选</button>
  <ul>
    <li v-for="item in filteredLeftItems" :key="item.id">
      <input type="checkbox" v-model="selectedLeft" :value="item.id">
      {{ item.label }}
    </li>
  </ul>
</div>

// 新增数据和方法
data() {
  return {
    leftFilter: '',
    rightFilter: ''
  }
},
computed: {
  filteredLeftItems() {
    return this.leftItems.filter(item => 
      item.label.toLowerCase().includes(this.leftFilter.toLowerCase())
    )
  }
},
methods: {
  selectAllLeft() {
    this.selectedLeft = this.filteredLeftItems.map(item => item.id)
  }
}

组件封装建议

将穿梭框封装为独立组件，通过props接收数据源，通过emit触发变化事件。

props: {
  data: {
    type: Array,
    required: true
  }
},
emits: ['change'],
methods: {
  handleMoveToRight() {
    this.moveToRight()
    this.$emit('change', this.selectedRight)
  }
}

以上实现提供了基础穿梭框功能，可根据实际需求进一步扩展如拖拽排序、自定义渲染等高级特性。

vue实现穿梭框