获取 Ant Design Vue 穿梭框右边选中的数据

在 Ant Design Vue 穿梭框中获取右边选中的数据，可以通过 v-model 绑定右边选中的数据，然后在提交时获取该数据即可。

例如：

<a-transfer
  :data-source="data"
  :target-keys="targetKeys"
  :selected-keys="selectedKeys"
  :render="render"
  v-model="selectedItems"
></a-transfer>

在上面的代码中，v-model 绑定了 selectedItems，该变量即为右边选中的数据。

可以在提交时通过 selectedItems 获取右边选中的数据：

submit() {
  console.log(this.selectedItems);
}

相关问题

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>

ant design vue 1.7.8 穿梭框组件，改变文字颜色

要改变 Ant Design Vue 1.7.8 穿梭框组件中的文字颜色，您可以使用 CSS 来自定义样式。以下是一种可能的方法：

1. 在您的样式文件中，为穿梭框组件添加一个自定义的类名，例如 "custom-transfer"。

2. 使用该类名选择器来指定文字颜色样式。例如，如果您想将文字颜色设置为红色，可以添加以下样式：

.custom-transfer .ant-transfer-list-content-item {
  color: red;
}

这将选择穿梭框组件中的每个项目，并将文字颜色设置为红色。

3. 将样式文件引入到您的项目中，并确保该样式文件在穿梭框组件之后被加载。

通过这种方法，您可以改变 Ant Design Vue 1.7.8 穿梭框组件中的文字颜色。请注意，具体的类名和选择器可能需要根据您的项目结构和需求进行调整。