当前位置：首页 > VUE

vue实现元素穿梭

2026-02-20 09:15:32VUE

Vue 实现元素穿梭功能

元素穿梭（Transfer）是常见的前端交互功能，通常用于左右两栏之间移动选项。以下是基于 Vue 的实现方法：

基础组件结构

使用两个列表（左侧源列表和右侧目标列表）以及操作按钮实现：

<template>
  <div class="transfer-container">
    <div class="list-container">
      <h3>源列表</h3>
      <ul>
        <li v-for="item in leftList" :key="item.id">
          <input type="checkbox" v-model="item.checked">
          {{ item.label }}
        </li>
      </ul>
    </div>

    <div class="action-buttons">
      <button @click="moveToRight">→</button>
      <button @click="moveToLeft">←</button>
    </div>

    <div class="list-container">
      <h3>目标列表</h3>
      <ul>
        <li v-for="item in rightList" :key="item.id">
          <input type="checkbox" v-model="item.checked">
          {{ item.label }}
        </li>
      </ul>
    </div>
  </div>
</template>

核心逻辑实现

数据结构和操作方法：

<script>
export default {
  data() {
    return {
      leftList: [
        { id: 1, label: '选项1', checked: false },
        { id: 2, label: '选项2', checked: false },
        // 更多初始数据...
      ],
      rightList: []
    }
  },
  methods: {
    moveToRight() {
      this.rightList = [
        ...this.rightList,
        ...this.leftList.filter(item => item.checked)
      ]
      this.leftList = this.leftList.filter(item => !item.checked)
    },
    moveToLeft() {
      this.leftList = [
        ...this.leftList,
        ...this.rightList.filter(item => item.checked)
      ]
      this.rightList = this.rightList.filter(item => !item.checked)
    }
  }
}
</script>

样式优化

添加基础样式提升用户体验：

<style>
.transfer-container {
  display: flex;
  align-items: center;
  gap: 20px;
}
.list-container {
  border: 1px solid #ddd;
  padding: 10px;
  width: 200px;
}
ul {
  list-style: none;
  padding: 0;
  max-height: 300px;
  overflow-y: auto;
}
li {
  padding: 5px 0;
  border-bottom: 1px solid #eee;
}
.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
</style>

高级功能扩展

全选/反选功能：

methods: {
toggleAll(list, checked) {
 list.forEach(item => {
   item.checked = checked
 })
}
}

拖拽支持：通过添加 draggable 属性和相关事件实现拖拽穿梭

搜索过滤：添加输入框和过滤逻辑：

computed: {
filteredLeftList() {
 return this.leftList.filter(item => 
   item.label.includes(this.searchLeft)
 )
}
}

组件化建议

对于复杂项目，可将穿梭框拆分为独立组件：

<transfer-box 
  :source="leftList"
  :target="rightList"
  @transfer="handleTransfer"
/>

这种实现方式提供了基础穿梭功能，可根据实际需求进一步扩展和完善。

vue实现元素穿梭

标签: 元素 vue

分享给朋友：

vue实现旋转

Vue 实现旋转效果的方法在 Vue 中实现旋转效果可以通过多种方式完成，以下是几种常见的方法：使用 CSS 动画通过 Vue 的 :class 或 :style 绑定 CSS 动画实现旋转效…

vue实现管道

Vue 中实现管道（Pipe）功能在 Vue 中可以通过过滤器（Filters）或计算属性（Computed Properties）实现类似管道的功能，将数据经过多个处理步骤后输出。使用过滤器（…

vue实现盖章

Vue 实现盖章功能在Vue中实现盖章功能通常涉及前端UI交互，通过Canvas或SVG绘制印章，并允许用户拖拽或点击放置印章。以下是具体实现方法：使用Canvas绘制印章通过HTML5的Ca…

vue实现 toast

Vue 实现 Toast 组件在 Vue 中实现 Toast 组件可以通过多种方式完成，以下是几种常见的方法：使用全局组件和事件总线创建一个全局的 Toast 组件，并通过事件总线或 Vue…

vue 实现脚本

Vue 实现脚本的方法 Vue.js 提供了多种方式来实现脚本功能，包括组件内脚本、混入（Mixins）、插件（Plugins）以及自定义指令等。以下是常见的实现方式：组件内脚本在 Vue 单…

vue实现日历

Vue 实现日历的基本方法使用 Vue 实现日历可以通过自定义组件或借助第三方库完成。以下是两种常见实现方式：自定义日历组件创建基于 Vue 的日历组件需要处理日期计算和渲染逻辑。核心是生成当…

vue实现元素穿梭