Vue3 + Element Plus Transfer 穿梭框自定義分組的示例詳解

更新時間：2025年07月03日 10:30:33 作者：滿

本文介紹Vue3結合ElementPlus實現(xiàn)Transfer穿梭框自定義分組的四種方法,每種方法結合實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧

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

<template>
  <el-transfer
    v-model="selectedData"
    :data="groupedData"
    :render-content="renderFunc"
    :titles="['可選數(shù)據(jù)', '已選數(shù)據(jù)']"
  />
</template>
<script setup>
import { ref } from 'vue';
const selectedData = ref([]);
// 分組數(shù)據(jù)格式
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' }
    ]
  }
]);
// 扁平化數(shù)據(jù)供Transfer使用
const flatData = computed(() => {
  return groupedData.value.flatMap(group => 
    group.children.map(item => ({
      key: item.key,
      label: item.label,
      disabled: item.disabled
    }))
  );
});
// 自定義渲染函數(shù)
const renderFunc = (h, option) => {
  // 這里可以自定義渲染邏輯
  return h('div', option.label);
};
</script>

2. 完全自定義左右面板

如果需要更復雜的分組效果，可以完全自定義左右面板：

<template>
  <div class="custom-transfer">
    <div class="transfer-panel">
      <div class="panel-header">可選數(shù)據(jù)</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">已選數(shù)據(jù)</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';
// 原始分組數(shù)據(jù)
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 }
    ]
  }
]);
// 計算左側分組數(shù)據(jù)
const leftGroups = computed(() => {
  return rawData.value.map(group => ({
    ...group,
    children: group.children.filter(item => !selectedData.value.includes(item.key))
  }));
});
// 計算右側分組數(shù)據(jù)
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. 使用插槽自定義內(nèi)容

Element Plus 的 Transfer 組件提供了插槽來自定義內(nèi)容：

<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 組件實現(xiàn)樹形分組

如果需要樹形分組，可以結合 Tree 組件來實現(xiàn)：

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

到此這篇關于Vue3 + Element Plus Transfer 穿梭框自定義分組的文章就介紹到這了,更多相關Vue3 Element Plus Transfer 穿梭框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: