Vue3 + Element Plus Transfer 穿梭框自定义分组

1. 使用 render-content 自定义渲染

<template><el-transferv-model="selectedData":data="groupedData":render-content="renderFunc":titles="['可选数据', '已选数据']"/>
</template><script setup>
import { ref } from 'vue';const selectedData = ref([]);// 分组数据格式
const groupedData = ref([{key: 'group1',label: '第一组',disabled: false,children: [{ key: '1', label: '选项1' },{ key: '2', label: '选项2' }]},{key: 'group2',label: '第二组',disabled: false,children: [{ key: '3', label: '选项3' },{ key: '4', label: '选项4' }]}
]);// 扁平化数据供Transfer使用
const flatData = computed(() => {return groupedData.value.flatMap(group => group.children.map(item => ({key: item.key,label: item.label,disabled: item.disabled})));
});// 自定义渲染函数
const renderFunc = (h, option) => {// 这里可以自定义渲染逻辑return h('div', option.label);
};
</script>

2. 完全自定义左右面板

如果需要更复杂的分组效果，可以完全自定义左右面板：

<template><div class="custom-transfer"><div class="transfer-panel"><div class="panel-header">可选数据</div><div class="panel-body"><div v-for="group in leftGroups" :key="group.key" class="group"><div class="group-title">{{ group.label }}</div><div class="group-items"><el-checkbox v-for="item in group.children" :key="item.key"v-model="item.checked":label="item.label"@change="handleLeftChange(item)"/></div></div></div></div><div class="transfer-buttons"><el-button @click="moveToRight">→</el-button><el-button @click="moveToLeft">←</el-button></div><div class="transfer-panel"><div class="panel-header">已选数据</div><div class="panel-body"><div v-for="group in rightGroups" :key="group.key" class="group"><div class="group-title">{{ group.label }}</div><div class="group-items"><el-checkbox v-for="item in group.children" :key="item.key"v-model="item.checked":label="item.label"@change="handleRightChange(item)"/></div></div></div></div></div>
</template><script setup>
import { ref, computed } from 'vue';// 原始分组数据
const rawData = ref([{key: 'group1',label: '第一组',children: [{ key: '1', label: '选项1', checked: false },{ key: '2', label: '选项2', checked: false }]},{key: 'group2',label: '第二组',children: [{ key: '3', label: '选项3', checked: false },{ key: '4', label: '选项4', checked: false }]}
]);// 计算左侧分组数据
const leftGroups = computed(() => {return rawData.value.map(group => ({...group,children: group.children.filter(item => !selectedData.value.includes(item.key))}));
});// 计算右侧分组数据
const rightGroups = computed(() => {const selectedKeys = selectedData.value;return rawData.value.map(group => ({...group,children: group.children.filter(item => selectedKeys.includes(item.key))})).filter(group => group.children.length > 0);
});// 移动选中项到右侧
const moveToRight = () => {rawData.value.forEach(group => {group.children.forEach(item => {if (item.checked && !selectedData.value.includes(item.key)) {selectedData.value.push(item.key);item.checked = false;}});});
};// 移动选中项到左侧
const moveToLeft = () => {rawData.value.forEach(group => {group.children.forEach(item => {if (item.checked && selectedData.value.includes(item.key)) {const index = selectedData.value.indexOf(item.key);selectedData.value.splice(index, 1);item.checked = false;}});});
};
</script><style scoped>
.custom-transfer {display: flex;align-items: center;
}
.transfer-panel {width: 250px;border: 1px solid #ebeef5;border-radius: 4px;
}
.panel-header {padding: 10px;background: #f5f7fa;border-bottom: 1px solid #ebeef5;
}
.panel-body {padding: 10px;height: 300px;overflow: auto;
}
.group {margin-bottom: 15px;
}
.group-title {font-weight: bold;margin-bottom: 5px;
}
.transfer-buttons {margin: 0 10px;
}
</style>

3. 使用插槽自定义内容

Element Plus 的 Transfer 组件提供了插槽来自定义内容：

<el-transfer v-model="value" :data="data"><template #left-footer><el-button size="small">操作</el-button></template><template #right-footer><el-button size="small">操作</el-button></template>
</el-transfer>

4. 结合 Tree 组件实现树形分组

如果需要树形分组，可以结合 Tree 组件来实现：

<template><div class="tree-transfer"><div class="left-panel"><el-tree:data="treeData"show-checkboxnode-key="id"ref="leftTree"@check-change="handleCheckChange"/></div><div class="transfer-buttons"><el-button @click="moveToRight">→</el-button><el-button @click="moveToLeft">←</el-button></div><div class="right-panel"><el-tree:data="selectedTreeData"show-checkboxnode-key="id"ref="rightTree"/></div></div>
</template>