当前位置：首页 > news >正文

Vue学习穿梭框Transfer组件

news 2025/8/8 22:37:23

Vue学习Transfer组件

一、前言
- 1、案例一
- 2、案例二

一、前言

在 Vue 3 中使用 el-transfer 组件可以帮助你实现数据的穿梭功能，让用户可以将数据从一个列表转移到另一个列表。下面是一个简单示例，演示如何在 Vue 3 中使用 el-transfer 组件：

首先，确保你的项目中已经安装了 Element Plus 组件库，因为 el-transfer 是 Element Plus 提供的组件之一。如果没有安装，你可以通过以下命令进行安装：

1、案例一

然后，在你的 Vue 组件中，你可以像这样使用 el-transfer 组件：

<template><el-transferv-model:modelValue="value":data="data":titles="['Source', 'Target']"@change="handleChange"></el-transfer>
</template><script setup>
import { ref } from "vue";const value = ref([]);
const data = ref([{key: 1,label: "Option 1",},{key: 2,label: "Option 2",},{key: 3,label: "Option 3",},{key: 4,label: "Option 4",},
]);const handleChange = (val) => {console.log("Change", val);
};
</script>

在这个示例中，我们首先导入 ElTransfer 组件，并在 setup 函数中初始化了 value 和 data 这两个响应式变量。然后在模板中，我们使用 el-transfer 组件，并将 value 和 data 分别绑定到 v-model:modelValue 和 :data 属性上。同时，我们定义了 titles 属性来指定左右两侧列表的标题，并监听了 change 事件来处理数据变化时的逻辑。
在这里插入图片描述

2、案例二

读取右移动值

<template><el-transferv-model="transferData":data="dataArray"filterable:titles="['待选区域', '选择区域']"@change="handleChange"></el-transfer>
</template><script setup>
import { ref } from "vue";const transferData = ref([]);
const dataArray = ref([{key: 1,label: "Option 1",},{key: 2,label: "Option 2",},{key: 3,label: "Option 3",},
]);function handleChange(value, direction, movedKeys) {//     console.log("Transfer dataArray changed:", dataArray);//     console.log("Transfer transferData changed:", transferData);//     console.log("Transfer value changed:", value);//     console.log("Transfer direction changed:", direction);//     console.log("Transfer movedKeys changed:", movedKeys);const keys = value;const keyValues = dataArray._rawValue;let values = [];keys.forEach(function (keyToFind) {const foundItem = keyValues.find((item) => item.key === keyToFind);values.push(foundItem.label);});console.log(values);
}
</script>