vue el-transfer 使用例子

Vue的`el-transfer`组件是Element UI库中的一个实用组件，它允许用户在两个列表之间拖放元素并进行数据传递。下面是一个简单的`el-transfer`使用的例子：

<template>
  <div>
    <el-transfer
      :data="listA"
      :target-data="listB"
      filter-method="filterFn"
      transfer-method="transferMethod"
      placeholder="点击添加到目标"
      @change="handleChange"
    ></el-transfer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listA: ['Item A1', 'Item A2', 'Item A3'], // 源列表
      listB: ['Item B1', 'Item B2'], // 目标列表
    };
  },
  methods: {
    filterFn(item) {
      // 过滤源列表的条件
      return item.name.indexOf('A') === 0;
    },
    transferMethod(source, target, move) {
      // 当拖动元素时触发的方法，这里只是一个示例，可以根据实际需求处理元素的移动
      if (move) {
        // 如果是从源列表移到目标列表，则移除该元素并添加到目标列表
        this.listA.splice(source, 1);
        this.listB.push(target);
      }
    },
    handleChange(source, target, remove) {
      console.log(`已转移的项：${source}, ${target}, 移除的项：${remove}`);
      // 当数据变化时，这里的回调可以做进一步的数据处理
    },
  },
};
</script>

在这个例子中，`el-transfer`接收两个数据数组`listA`和`listB`作为源列表和目标列表，`filterFn`用于过滤源列表，`transferMethod`处理元素的移动操作，而`handleChange`则在数据发生变化时打印日志。