Vue3 + Element Plus Transfer 穿梭框自定义分组的示例详解

<template>
  <el-transfer
    v-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>

<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>

<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>

<template>
  <div class="tree-transfer">
    <div class="left-panel">
      <el-tree
        :data="treeData"
        show-checkbox
        node-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-checkbox
        node-key="id"
        ref="rightTree"
      />
    </div>
  </div>
</template>