当前位置：首页 > 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 渲染左右列表，并添加按钮控制穿梭逻辑：

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

增强功能

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

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 购物按钮实现方法基础按钮实现使用 Vue 的模板语法创建基础按钮组件，绑定点击事件处理购物逻辑： <template> <button @click="addTo…

vue登录业务的实现

实现登录业务的基本流程在Vue中实现登录业务通常涉及前端界面设计、表单验证、API请求交互、状态管理以及路由控制等环节。以下是核心实现步骤：登录表单设计与验证创建包含用户名和密码输入框的登录…

vue公共列表的实现

实现 Vue 公共列表组件公共列表组件通常用于展示重复结构的数据，例如商品列表、用户列表等。以下是一个典型的实现方式：基础实现创建可复用的列表组件 List.vue： <templ…

vue 实现菜单

Vue 实现菜单的方法使用 Vue 实现菜单可以通过多种方式，以下是几种常见的方法：使用 Vue Router 实现动态路由菜单通过 Vue Router 可以动态生成菜单，根据路由配置自动渲…

vue 指令实现

Vue 指令实现 Vue 指令是 Vue.js 提供的特殊属性，用于在 DOM 元素上添加特殊行为。指令以 v- 前缀开头，例如 v-model、v-if、v-for 等。以下是实现自定义指令和常用内…

vue 实现回复

Vue 实现回复功能在 Vue 中实现回复功能通常涉及表单提交、数据绑定和列表渲染。以下是实现步骤和代码示例：数据绑定与表单 <template> <div>…

vue实现元素穿梭