vue实现穿梭框

Vue 实现穿梭框

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

基础组件结构

创建两个列表（左侧和右侧），以及移动按钮。使用 v-model 绑定数据。

<template>
  <div class="transfer">
    <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.name }}
        </li>
      </ul>
    </div>
    <div class="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.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

数据与逻辑

定义数据和方法，处理选中项和移动逻辑。

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

样式优化

添加基础样式，使组件更美观。

<style scoped>
.transfer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.list {
  border: 1px solid #ddd;
  padding: 10px;
  width: 200px;
  height: 300px;
  overflow-y: auto;
}
.buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
button {
  padding: 5px 10px;
  cursor: pointer;
}
ul {
  list-style: none;
  padding: 0;
}
li {
  padding: 5px 0;
}
</style>

高级功能扩展

1. 搜索过滤
   添加搜索框，过滤列表项。

<input v-model="leftSearch" placeholder="搜索左侧列表">
<input v-model="rightSearch" placeholder="搜索右侧列表">

1. 全选/反选
   添加全选和反选按钮。

toggleAllLeft(selectAll) {
  this.selectedLeft = selectAll 
    ? this.leftItems.map(item => item.id) 
    : []
}

1. 拖拽支持
   使用 draggable 库实现拖拽功能。

<draggable v-model="leftItems" group="items">
  <!-- 列表项 -->
</draggable>

使用现成组件库

如果不想手动实现，可以直接使用以下组件库中的穿梭框：

• Element UI：el-transfer
• Ant Design Vue：a-transfer
• Vuetify：自定义实现或第三方插件

例如，使用 Element UI：

<el-transfer
  v-model="rightItems"
  :data="leftItems"
  :titles="['可选', '已选']"
></el-transfer>

通过以上方法，可以快速实现一个功能完善的穿梭框组件。