Vue学习穿梭框Transfer组件

---

一、前言

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

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

1、案例一

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

<template>
  <el-transfer
    v-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-transfer
    v-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>
  

---

1. 永远不要低估自己的潜力，只有敢于挑战自我，才能发掘无限可能。
2. 人生的价值，在于创造贡献。每一个坚定的信念，都是一份力量。
3. 成功并不是终点，而是一段旅程。在这个旅程中，我们要保持耐心、信心和坚持，这才是取得胜利的关键。
4. 人生就像跑步，要有一个清晰的目标，才有动力奔跑；要有一个良好的心态，才能走得更远。
5. 拥有梦想是一种幸福，实现梦想是一种成就。只要我们把握机会，坚持努力，就能迈向成功的道路。
6. 没有什么比坚持更重要，因为坚持可以让我们拥有改变命运的力量。
7. 成功需要的不仅是勇气和决心，还需要智慧和耐性。只有在不断学习和成长的过程中，才能让自己更加优秀。
8. 生活中最大的敌人是自己的内心，只有克服了自己，才能迎来真正的成功。
9. 每一次坚持都是一次积累，每一次付出都是一份珍贵的经验。只有不断前行，才能让自己更加强大。
10. 人生路上，没有天生的强者，只有那些不屈不挠的人最终成就了非凡的自己。所以，让我们一起勇往直前，追逐成功的光芒！