el-transfer获取动态数据

可以通过绑定 :data 属性来获取动态数据，例如:

<el-transfer
v-model="selectedData"
:data="getDynamicData()"
:titles="['源列表', '目标列表']">
</el-transfer>

其中，getDynamicData() 函数可以返回最新的动态数据，el-transfer 会根据返回的数据自动更新列表。

相关问题

el-transfer 回显数据

el-transfer 组件可以用来实现拖拽上传文件的功能，当用户拖拽文件到组件区域时，会触发 `change` 事件，此时可以获取到上传的文件信息。具体的回显数据的方式取决于你的业务需求和后端接口的实现，可以将上传的文件信息发送到后端进行处理，然后前端再从后端获取处理结果进行回显。下面是一个简单的示例代码：

<el-transfer
  v-model="fileList"
  :data="formData"
  :action="uploadUrl"
  :on-change="handleChange"
>
</el-transfer>

data() {
  return {
    fileList: [],
    formData: {},
    uploadUrl: '/api/upload'
  }
},
methods: {
  handleChange(fileList) {
    // 发送文件到后端进行处理
    axios.post(this.uploadUrl, this.formData).then(response => {
      // 处理后端返回的数据，进行回显
      // ...
    }).catch(error => {
      console.error(error)
    })
  }
}

在 `handleChange` 方法中，调用后端接口将文件信息上传到后端进行处理，并在接口返回数据后进行回显。具体的回显方式需要根据业务需求进行实现。

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()` 来动态更新右侧展示的数据，从而实现您的需求。