ElementUI中transfer组件左右数据同源问题

在ElementUI的<el-transfer>组件中，如果左右边的数据源是同一个数组，并且你需要在源数组上进行过滤或者其他操作，那么你可能会遇到数据同源导致的问题。

解决这个问题的关键是不直接使用同一数据源，而是在操作过程中对数据进行深拷贝或者使用计算属性来生成左右边的数据视图。

以下是一个简单的示例代码：

<template>
  <el-transfer
    v-model="selectedValues"
    :data="filteredData"
    :props="{
      key: 'id',
      label: 'name'
    }"
  >
  </el-transfer>
</template>
 
<script>
export default {
  data() {
    return {
      selectedValues: [],
      originalData: [
        { id: 1, name: 'Option 1', },
        { id: 2, name: 'Option 2', },
        // ... 更多选项
      ],
    };
  },
  computed: {
    filteredData() {
      // 这里可以根据需要进行过滤或其他操作
      return this.originalData.map(item => ({ ...item }));
    },
  },
};
</script>

在这个例子中，originalData是原始数据数组，filteredData是计算属性，它在每次访问时都会根据原始数据生成一个新的数组副本，这样左右边的数据就不会互相影响了。注意，.map(item => ({ ...item }))用来创建原始对象的深拷贝，这样每个数据项都是独立的。

如果你需要实时更新原始数据，可以在操作selectedValues的时候，根据需要对originalData进行修改。