当前位置：首页 > 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实现星星评分功能可以通过组件化方式完成，以下是一个完整的实现方案：模板部分 <template> <div class="star-ra…

vue全选实现

Vue 全选实现方法在 Vue 中实现全选功能通常涉及数据绑定和事件处理。以下是几种常见的实现方式：基础实现方式 <template> <div> <…

vue实现语音

Vue 实现语音功能的方法使用 Web Speech API Vue 可以结合 Web Speech API 实现语音识别和合成功能。Web Speech API 包含 SpeechRecognit…

vue实现文字

Vue 中实现文字显示的方法在 Vue 中实现文字显示可以通过多种方式，包括插值表达式、指令、组件等。以下是几种常见的实现方法：插值表达式使用双大括号 {{ }} 进行文本插值，这是 Vue…

vue实现全屏

Vue 实现全屏功能的方法在 Vue 中实现全屏功能可以通过浏览器提供的 Fullscreen API 来实现。以下是几种常见的实现方式：使用原生 Fullscreen API 通过调用 doc…

vue实现机制

Vue 实现机制的核心原理 Vue.js 的核心实现机制主要基于响应式系统、虚拟 DOM 和组件化设计。以下是关键实现细节：响应式系统 Vue 通过 Object.defineProperty（V…

vue实现元素穿梭