element穿梭框自定义key右侧数据不回显

element穿梭框右侧数据不回显
左侧的数据根据后端返回的数据进行回填，其中唯一值key用后端返回的id代替

右侧数据回显也是根据后端返回的数据进行页面显示，但是右侧数据不显示

如果用element穿梭框原始的写法就可以

所以这个唯一key是否可以用自己的数据来代替

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 这篇博客: 解决element的表单校验输入框有值但校验未通过的问题中的 附：特殊的表单校验–循环数据校验、不确定key的表单校验等 部分也许能够解决你的问题。
• 以下回答由chatgpt基于相关博客总结生成:

  问题描述: 我正在使用element穿梭框组件，并遇到了右侧数据不回显的问题。左侧的数据根据后端返回的数据进行回填，其中唯一值key已经使用后端返回的id代替。但是右侧数据却不显示。

  希望解决的问题: 我想知道是否可以用自己的数据来代替这个唯一key，以解决右侧数据不回显的问题。

  解决方案： 1. 确保后端返回的数据与右侧穿梭框所需的数据格式匹配。 2. 使用Vue的计算属性来处理右侧穿梭框的数据。 3. 在计算属性中，根据后端返回的数据生成新的数据对象，以自定义的数据代替唯一key。 4. 在模板中使用新生成的数据对象来渲染右侧穿梭框。

  下面是一个示例代码:

  <template>
    <el-transfer
      v-model="targetData"
      :data="sourceData"
      :filterable="true"
      :filter-method="filterMethod"
      :props="transferProps"
    ></el-transfer>
  </template>
  
  <script>
  export default {
    data() {
      return {
        sourceData: [], // 左侧穿梭框的数据，根据后端返回的数据进行回填
        targetData: [], // 右侧穿梭框的数据，根据后端返回的数据进行回填
      };
    },
    computed: {
      transferProps() {
        // 计算属性：根据后端返回的数据生成新的数据对象，将key用自定义的数据代替
        return {
          key: "customKey",
          label: "name",
        };
      },
    },
    methods: {
      filterMethod(query, item) {
        // 根据筛选条件进行过滤
        return item.name.indexOf(query) > -1;
      },
    },
  };
  </script>
  

  通过以上步骤，我们使用计算属性生成新的数据对象，将唯一key替换为自己的数据，然后在模板中使用新的数据对象来渲染右侧穿梭框，从而解决右侧数据不回显的问题。

  希望以上解决方案对您有帮助。若还有其他问题，请随时提问。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

id类型是否相同，都为Number或者String