vue3.2 使用el-ement-ui的 Transfer穿梭框的代码实例

以下是使用 Vue3.2 和 Element-UI 的 Transfer 穿梭框的代码示例：

<template>
  <el-transfer
    v-model="transferData"
    :data="data"
    :titles="['Source', 'Target']"
    :filterable="true"
    :props="{
      key: 'id',
      label: 'name',
      disabled: 'disabled',
      description: 'description'
    }"
  ></el-transfer>
</template>

<script>
import { ref } from 'vue'
import { ElTransfer } from 'element-plus'

export default {
  components: {
    ElTransfer
  },
  setup() {
    const transferData = ref([])
    const data = ref([
      {
        id: 1,
        name: 'Option 1',
        description: 'Description of option 1',
        disabled: false
      },
      {
        id: 2,
        name: 'Option 2',
        description: 'Description of option 2',
        disabled: false
      },
      {
        id: 3,
        name: 'Option 3',
        description: 'Description of option 3',
        disabled: true
      },
      {
        id: 4,
        name: 'Option 4',
        description: 'Description of option 4',
        disabled: false
      }
    ])

    return {
      transferData,
      data
    }
  }
}
</script>

希望对你有所帮助！