el-transfer change事件怎么用

`el-transfer`组件的`change`事件是在用户完成数据传输（从源列表选择并移至目标列表）之后触发的。这个事件会提供一个对象，包含了所有发生变化的信息，包括源列表、目标列表的变化以及是否是用户直接拖拽操作等。

以下是`change`事件的一个基本使用示例：

<template>
  <el-transfer
    :data-source="sourceData"
    :target-data="targetData"
    :props="{ key: 'id', label: 'name' }"
    :show-header="true"
    :filter-method="filterMethod"
    v-model="selectedKeys" // 绑定当前选中的值
    @change="handleChange"
  ></el-transfer>
</template>

<script>
export default {
  data() {
    return {
      sourceData: ...,
      targetData: ..., // 源数据和目标数据
      selectedKeys: [] // 选中的数据key数组
    };
  },
  methods: {
    handleChange(result) {
      console.log('数据发生了变化:', result); // result包含详细变动信息
      // 根据result，你可以更新源数据、目标数据，或者执行其他业务逻辑
      if (result.removed) {
        // 数据从源转移到了目标，做相应的删除操作
      }
      if (result.added) {
        // 数据从源添加到了目标，做相应的添加操作
      }
      if (result.changed) {
        // 数据在源和目标之间有变动，进行相应处理
      }
    },
    filterMethod(item, search) {
      // 过滤方法...
    }
  }
};
</script>

在这个例子中，`v-model`绑定了`selectedKeys`，这是用户选择的数据的标识。当用户在`el-transfer`上进行了选择并触发`change`事件时，`handleChange`函数会被调用，你可以在这里获取并处理用户操作的结果。