-DPDK中文网

根据您提供的代码，右边已选状态没有正确显示的原因可能在于 targetKeys 和 selectedKeys 的处理不当。<a-transfer> 组件通常会将目标键（即已选项）与其相关联的数据进行渲染，因此要确保这两个值之间的关系是清晰的。

解决方案

确保数据源包含所有必要的数据：确保 dataSource 中每个项目都有一个唯一的 key 属性，以便组件可以识别它们。
更新handleChange方法：在右侧选中的元素更改时，我们需要适当地设置 selectedKeys 和 targetKeys.
修复数据绑定：确保在使用 v-model 时，数据模型是正确连接的。

以下是针对上述问题的一些调整：

<template>
    <div style="margin-top: 40px">
      <a-transfer
        v-model:target-keys="targetKeys"
        :selected-keys="selectedKeys"
        :data-source="dataSource"
        :titles="['待选状态', '已选状态']"
        :render="renderItem"
        @change="handleChange"
        style="width: 100%; height: 300px; overflow-y: auto;"
      />
    </div>
</template>

<script setup>
import { ref, reactive, h, onMounted } from 'vue';
import { message } from 'ant-design-vue';
import { useRoute } from 'vue-router';
import { queryTagList, getCustomerTags } from '@/utils';

const targetKeys = ref([]);
const selectedKeys = ref([]);
const route = useRoute();
const custId = ref('');
const dataSource = ref([]);

const renderItem = (item) => {
  return h('span', { style: { color: item.color } }, item.title);
};

const handleChange = (nextTargetKeys, direction, moveKeys) => {
  console.log('targetKeys:', nextTargetKeys);
  console.log('direction:', direction);
  console.log('moveKeys:', moveKeys);

  if (direction === 'right') {
    if (nextTargetKeys.length > 1) {
      message.warning('只可选择一个标签');
      const lastSelectedKey = moveKeys[moveKeys.length - 1];
      targetKeys.value = [lastSelectedKey];
    } else {
      targetKeys.value = nextTargetKeys;
    }
    
    // 更新 selected keys
    selectedKeys.value = nextTargetKeys; // 此行可能需要添加以保持一致性
  } else if (direction === 'left') {
    targetKeys.value = nextTargetKeys; 
    // 如果移除标签时，也同步更新 selected keys
    selectedKeys.value = nextTargetKeys; // 此行可能需要添加以保持一致性
  }
};

const fetchAvailableTags = () => {
  queryTagList().then((response) => {
    if (response.success) {
      dataSource.value = response.data.map((tag) => ({
        key: tag.id,
        title: tag.tagsDescription,
        color: tag.color || '#000',
      }));
    } else {
      message.error(response.message);
    }
  });
};

const fetchSelectedTags = () => {
  getCustomerTags({ customerId: custId.value }).then((response) => {
    if (response.success) {
      const tagsData = response.data.map((tag) => tag.id);
      
      selectedKeys.value = tagsData;
      targetKeys.value = tagsData; // 确保两者初始时相同
    } else {
      message.error(response.message);
    }
  });
};

onMounted(() => {
  custId.value = route.query.custId;
  
   fetchAvailableTags();
   fetchSelectedTags();
});
</script>