要在 Ant Design Vue 中实现一个穿梭框（Transfer）组件，并在批量打标的模态框中显示，可以按照以下步骤进行。首先，确保你已经安装了 ant-design-vue。
以下是更新后的代码示例，其中添加了一个穿梭框组件：
<template>
<div class="form-tool">
<a-button class="margin-right-10 button-light-blue" @click="openModal">批量打标</a-button>
<a-modal v-model:visible="open" title="批量打标" @ok="handleOk">
<a-transfer
:data-source="statuses"
v-model:value="selectedKeys"
renderFormat={item => item.title}
:targetKeys="targetKeys"
:titles="[ '待处理', '已处理' ]"
@change="handleChange"
/>
</a-modal>
</div>
</template>
<script setup>
import { ref } from 'vue';
const open = ref(false); // 控制模态框的显示
const selectedKeys = ref([]); // 存储选择的状态
const targetKeys = ref([]); // 存储目标状态
// 状态及其对应颜色数据源
const statuses = [
{ key: '1', title: '状态一', color: '#f50' },
{ key: '2', title: '状态二', color: '#2db7f5' },
{ key: '3', title: '状态三', color: '#87d068' },
{ key: '4', title: '状态四', color: '#108ee9' },
{ key: '5', title: '状态五', color: '#f5222d' },
{ key: '6', title: '状态六', color: '#faad14' },
{ key: '7', title: '状态七', color: '#13c2c2' },
{ key: '8', title: '状态八', color: '#52c41a' },
{ key: '9', title: '状态九', color: '#1890ff' },
{ key: '10', title: '状态十', color:'#eb2f96'},
];
// 打开模态框的函数
const openModal = () => {
open.value = true;
};
// 确认按钮的回调函数
const handleOk = () => {
console.log('Selected Statuses:', selectedKeys.value);
open.value = false;
};
// 更改目标键的回调函数
const handleChange = (nextTargetKeys) => {
targetKeys.value = nextTargetKeys;
};
</script>
<style scoped>
/* 可以在这里添加样式 */
</style>
注意事项：
组件引入：确保在项目中正确引入了
antd-design-vue的相关组件。数据格式：穿梭框中的每个项都需要有一个唯一的
key和title，这段代码示例中使用的是数组对象来定义这些值。样式：如果你希望给每个选项设置颜色，你可能需要自定义渲染方法，以便根据颜色渲染列表项。上面的示例没有包括这个功能，如果需要，请告知，我可以进一步帮助你实现。
控制逻辑：当用户确认时，所选的数据会被打印到控制台，也可以根据需求进行其他处理。
通过上述方式，你就能在模态框中成功实现一个带有穿梭框的批量打标功能。如果还有其他具体要求或者疑问，欢迎继续询问！
内容由零声教学AI助手提供，问题来源于学员提问
