【常规使用】：

常规element-UI穿梭框Transfer，左边是数据源，右边是绑定的数据（属于同一源）。当数据源里不存在某一值时，右边一定会没有

【当前场景】：

本次场景，左边数据源变更时，右边数据一直存在

【图片说明】：

【代码可直接复制看效果】：

<template>
  <el-card shadow="never">
    <el-row>
      小组：
      <el-select v-model="groupData" placeholder="请选择">
        <el-option
          v-for="item in groupOptions"
          :key="item.value"
          :label="item.name"
          :value="item.value"
          :disabled="item.disabled"
        >
        </el-option>
      </el-select>
    </el-row>
    <el-divider />
    <el-row>
      <div>对应组人员:</div>
      <el-transfer
        v-model="selectedMember"
        :props="{
          key: 'value',
          label: 'name'
        }"
        :data="transferList"
        :titles="['未选成员', '已选成员']"
        style="margin-top: 30px"
        @right-check-change="rightCheckChange"
      />
    </el-row>
  </el-card>
</template>

<script>
// 本次场景，左边数据源变更时，右边数据一直存在
import { uniqBy } from 'lodash';

export default {
  data() {
    return {
      groupData: [],
      groupOptions: [],
      selectedMember: []
    };
  },
  computed: {
    // 穿梭框数据源
    transferList() {
      if (this.groupData && this.groupOptions?.length > 0 && this.groupOptions[this.groupData]?.children) {
        // 为了右边数据一直存在(不会因为切换的数据源里不存在，而不绑定)
        const rightSelected = [];
        this.groupOptions[0]?.children.forEach(item => {
          this.selectedMember.forEach(child => {
            if (item.value === child) rightSelected.push(item);
          });
        });
        const uniqByArray = uniqBy(this.groupOptions[this.groupData].children.concat(rightSelected), 'value');
        return uniqByArray;
      }
      return [];
    }
  },
  mounted() {
    this.mockApi();
  },
  methods: {
    // 仿调接口
    mockApi() {
      // 接口获取
      this.groupOptions = [
        {
          value: '1',
          name: '一组',
          children: [
            {
              value: '1-1',
              name: '一组-小小'
            },
            {
              value: '1-2',
              name: '一组-小二'
            }
          ]
        },
        {
          value: '2',
          name: '二组',
          children: [
            {
              value: '2-1',
              name: '二组-小旦'
            },
            {
              value: '2-2',
              name: '二组-小刘'
            },
            {
              value: '2-3',
              name: '二组-小花'
            }
          ]
        }
      ];
      // 接口成功后,处理数据
      if (this.groupOptions?.length > 0) {
        const firstObj = {
          value: '0',
          name: '全部',
          children: []
        };
        this.groupOptions.forEach(item => {
          item.children &&
            item.children.forEach(child => {
              firstObj.children.push(child);
            });
        });
        this.groupOptions.unshift(firstObj);
        this.groupData = this.groupOptions[0]?.value;
      }
    },
    rightCheckChange(value) {
      // 最终右边选中的数据
      console.log(6666, value);
    }
  }
};
</script>