ant design vue2 穿梭框的点击事件

ant design vue2 的穿梭框（Transfer）组件提供了 `left-default-checked-keys-change` 和 `right-default-checked-keys-change` 事件来处理左右穿梭框中选中项改变的情况。同时也提供了 `left-active-item` 和 `right-active-item` 事件来处理左右穿梭框中当前激活项改变的情况。

以下是一个示例代码，演示如何监听 Transfer 组件中选中项改变和激活项改变的事件：

<template>
  <a-transfer
    :data-source="list"
    :target-keys="targetKeys"
    :render-format="renderFormat"
    @left-default-checked-keys-change="handleLeftCheckedChange"
    @right-default-checked-keys-change="handleRightCheckedChange"
    @left-active-item="handleLeftActiveItem"
    @right-active-item="handleRightActiveItem"
  >
  </a-transfer>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { key: '1', title: '选项1' },
        { key: '2', title: '选项2' },
        { key: '3', title: '选项3' },
        { key: '4', title: '选项4' },
      ],
      targetKeys: ['1', '2'],
    };
  },
  methods: {
    renderFormat(item) {
      return item.title;
    },
    handleLeftCheckedChange(checkedKeys) {
      console.log('左侧选中项改变：', checkedKeys);
    },
    handleRightCheckedChange(checkedKeys) {
      console.log('右侧选中项改变：', checkedKeys);
    },
    handleLeftActiveItem(activeItem) {
      console.log('左侧激活项改变：', activeItem);
    },
    handleRightActiveItem(activeItem) {
      console.log('右侧激活项改变：', activeItem);
    },
  },
};
</script>