element-ui穿梭框如何设备成左边的数据选中放在右边区域 而不是移动 左边的数据是不移动的 并且右边的顺序是可以调整的

Element UI 的穿梭框（Transfer）默认提供的是数据的交换功能，如果你想保持左边数据不变，只允许用户在右边选择并调整顺序，你可以稍微做一些定制。以下是一种可能的做法：

1. **禁用默认的拖动操作**：
首先，在组件的 `transfer` 属性中设置 `move` 选项为 `false`，以禁用默认的拖动功能。例如：

   <el-transfer
     :data="sourceData"
     :target-data="targetData"
     :transfer-config="{ move: false }"
     @change="handleTransferChange"
   ></el-transfer>

2. **处理数据传递**：
在 `handleTransferChange` 方法中，你可以手动更新目标数据的顺序，而不是让用户直接拖动改变。比如，可以创建一个新的数组，将选中的源数据添加到新数组的对应位置，而忽略未选择的数据。如果需要，还可以清除目标数据，然后将新的有序数据推入。

methods: {
  handleTransferChange(sourceList, targetList) {
    this.targetData = []; // 清空目标数据
    for (let item of sourceList) {
      // 根据实际需求，这里假设你想按照某个规则调整顺序
      const index = yourCustomSortIndexFunction(item);
      if (index !== -1) { // 如果找到了对应的位置
        this.targetData.splice(index, 0, item); // 插入数据
      }
    }
  },
}

3. **调整右侧显示**：
右侧列表（`targetData`）可以直接进行增删改的操作，用户可以通过点击或者拖拽调整元素的位置。

**相关问题--:**
1. 如何在 Element UI 中阻止 Transfer 组件的自动排序？
2. 如何在 Element UI 的 Transfer 组件中保存用户自定义的排列顺序？
3. 是否有其他组件可以替代，实现类似功能但不需要用户手动移动数据？