当前位置：首页 > 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>

核心逻辑实现

数据结构和操作方法：

vue实现元素穿梭

<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>

高级功能扩展

全选/反选功能：

vue实现元素穿梭

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 CLI 或 Vite 创建项目： npm init vue@latest my-system 选择需要的配置（Router、Pinia 等）。…

vue实现pie

Vue 实现饼图在 Vue 中实现饼图通常可以通过第三方图表库（如 ECharts、Chart.js 或 Highcharts）来完成。以下是使用 ECharts 和 Chart.js 的两种常见方…

vue实现picker

Vue 实现 Picker 组件的方法在 Vue 中实现 Picker 组件可以通过多种方式完成，以下是几种常见的实现方法：使用原生 HTML 和 CSS 实现通过 Vue 的模板和样式绑定，…

vue 实现全屏

Vue 实现全屏功能在 Vue 中实现全屏功能可以通过浏览器提供的 Fullscreen API 完成。以下是一个完整的实现方案：安装依赖（可选）如果需要跨浏览器兼容性更好，可以安装…

vue搜索实现

Vue 搜索功能实现方法基于计算属性的搜索在 Vue 中可以通过计算属性实现简单的搜索功能。这种方式适合小型数据集，利用 JavaScript 的 filter 方法进行筛选。 data() {…

vue实现秒表

实现秒表功能在Vue中实现秒表功能需要处理时间显示、开始、暂停和重置逻辑。以下是具体实现方式：基础实现代码 <template> <div> <div&…

vue实现元素穿梭