当前位置：首页 > VUE

vue实现元素穿梭

2026-01-19 17:05:56VUE

Vue 实现元素穿梭

在 Vue 中实现元素穿梭功能（即将元素从一个列表移动到另一个列表），可以通过以下方法实现。以下是一个基于 Vue 3 的示例：

基本实现

定义两个数组分别表示左右列表的数据，并使用 v-model 绑定到穿梭框组件：

<script setup>
import { ref } from 'vue';

const leftList = ref(['Item 1', 'Item 2', 'Item 3']);
const rightList = ref([]);
const selectedLeft = ref([]);
const selectedRight = ref([]);

const moveToRight = () => {
  rightList.value = [...rightList.value, ...selectedLeft.value];
  leftList.value = leftList.value.filter(item => !selectedLeft.value.includes(item));
  selectedLeft.value = [];
};

const moveToLeft = () => {
  leftList.value = [...leftList.value, ...selectedRight.value];
  rightList.value = rightList.value.filter(item => !selectedRight.value.includes(item));
  selectedRight.value = [];
};
</script>

模板部分

使用 v-for 渲染左右列表，并添加按钮控制穿梭逻辑：

vue实现元素穿梭

<template>
  <div class="transfer-container">
    <div class="list">
      <h3>Left List</h3>
      <ul>
        <li v-for="item in leftList" :key="item">
          <input type="checkbox" v-model="selectedLeft" :value="item">
          {{ item }}
        </li>
      </ul>
    </div>

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

    <div class="list">
      <h3>Right List</h3>
      <ul>
        <li v-for="item in rightList" :key="item">
          <input type="checkbox" v-model="selectedRight" :value="item">
          {{ item }}
        </li>
      </ul>
    </div>
  </div>
</template>

样式优化

添加基本样式使穿梭框更直观：

<style scoped>
.transfer-container {
  display: flex;
  gap: 20px;
  align-items: center;
}

.list {
  border: 1px solid #ccc;
  padding: 10px;
  width: 200px;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  margin: 5px 0;
}

.buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
</style>

增强功能

如果需要更复杂的功能（如搜索、全选等），可以扩展逻辑：

vue实现元素穿梭

const searchLeft = ref('');
const searchRight = ref('');

const filteredLeftList = computed(() => {
  return leftList.value.filter(item => 
    item.toLowerCase().includes(searchLeft.value.toLowerCase())
  );
});

const selectAllLeft = (checked) => {
  selectedLeft.value = checked ? [...leftList.value] : [];
};

使用第三方库

对于更复杂的需求，可以直接使用现成的 Vue 穿梭框组件库，例如：

vue-transfer-dom
element-ui 的 Transfer 组件（适用于 Vue 2）

安装示例（以 element-plus 为例）：

npm install element-plus

使用方式：

<template>
  <el-transfer v-model="rightList" :data="leftList"></el-transfer>
</template>

以上方法可以根据实际需求选择简单实现或集成成熟组件。

标签: 元素 vue

分享给朋友：

vue实现报表

vue实现报表的方法使用Vue实现报表通常需要结合图表库或表格组件。以下是几种常见方法：使用ECharts 安装ECharts库： npm install echarts vue-echart…

vue实现视频

Vue 实现视频播放的方法在 Vue 项目中实现视频播放可以通过多种方式完成，以下是几种常见的方法：使用 HTML5 的 <video> 标签在 Vue 组件中直接使用 HTML…

vue实现字幕

Vue 实现字幕功能在 Vue 中实现字幕功能可以通过动态绑定数据和 CSS 动画来实现。以下是具体实现方法： 1. 基础字幕组件创建一个字幕组件，通过 v-model 或 props 接收字…

vue搜索功能实现

Vue搜索功能实现方法在Vue中实现搜索功能可以通过多种方式完成，以下是几种常见的方法：使用计算属性实现搜索计算属性非常适合处理需要根据输入值动态过滤数据的情况。创建一个计算属性，根据搜索关键…

vue实现单词逆转

实现单词逆转的方法在Vue中实现单词逆转可以通过多种方式完成，以下是几种常见的方法：使用计算属性逆转单词计算属性是Vue中处理数据逻辑的理想选择。可以通过计算属性来实现单词逆转： &…

vue实现转页面

Vue 实现页面跳转的方法在 Vue 中实现页面跳转通常可以通过以下几种方式完成，具体取决于项目结构和需求。使用 router-link 组件 router-link 是 Vue Router…

vue实现元素穿梭