elementui Transfer 穿梭框如何动态数据

可以通过修改 Transfer 组件的 data 属性来实现动态数据。Transfer 组件的 data 属性接收一个数组，包含两个子数组，分别代表左右两栏的数据。你可以通过监听某个事件（如点击按钮），在回调函数中更新 data 数组的值，从而实现动态数据的穿梭。

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

<template>
  <div>
    <el-transfer
      :data="data"
      :titles="['Source', 'Target']"
      @change="handleChange"
    ></el-transfer>
    <el-button @click="updateData">更新数据</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          key: '1',
          label: '选项1'
        },
        {
          key: '2',
          label: '选项2'
        },
        // 初始数据
      ]
    };
  },
  methods: {
    handleChange(targetKeys) {
      console.log(targetKeys);
    },
    updateData() {
      // 模拟异步获取新的数据
      setTimeout(() => {
        this.data = [
          {
            key: '3',
            label: '选项3'
          },
          {
            key: '4',
            label: '选项4'
          },
          // 新的数据
        ];
      }, 1000);
    }
  }
};
</script>

在上面的示例中，Transfer 组件的 data 初始值为数组 `[ { key: '1', label: '选项1' }, { key: '2', label: '选项2' } ]`。当点击 "更新数据" 按钮时，通过 `updateData` 方法模拟异步获取新的数据，并将新的数据赋值给 `data` 属性。这样 Transfer 组件的数据就会动态更新。

你可以根据自己的需求，修改 `updateData` 方法来实现真实的数据获取和更新逻辑。