vue2穿梭框el-transfer中如何动态的展示右侧的数据

您可以动态地设置 `el-transfer` 组件的 `data` 属性来展示右侧的数据。具体来说，在 `data` 中指定您想要展示的项，然后将该数据对象分配给 `el-transfer` 的 `data` 属性即可。示例代码如下：

<template>
  <el-transfer
    v-model="transferData"
    :data="rightData"
    :titles="['Left', 'Right']"
  ></el-transfer>
</template>

<script>
export default {
  data() {
    return {
      transferData: [],  // 选中的数据项
      rightData: [],  // 右侧展示的数据
    }
  },

  methods: {
    // 动态更新右侧展示的数据
    updateRightData() {
      // 根据您的需求获取右侧数据的数组，我在此仅作示例
      const data = ['item1', 'item2', 'item3']

      this.rightData = data.map(val => {
        return {
          key: val,
          label: val
        }
      })
    }
  },

  mounted() {
    // 组件挂载时调用一次，展示默认的右侧数据
    this.updateRightData()
  }
}
</script>

在上述代码中，我们为 `el-transfer` 组件设置了双向绑定的 `v-model`，并且指定了要展示的标题文本。`rightData` 初始值为空数组，组件挂载后会执行 `mounted` 钩子函数中的 `updateRightData()` 方法，该方法会把右侧需要展示的数据更新为所需数据，并且通过 `map` 函数将数据对象转成符合要求的格式。在组件中，我们可以通过调用 `updateRightData()` 来动态更新右侧展示的数据，从而实现您的需求。