element-plus Transfer 穿梭框半成品

父组件引入 
 <Transfer :list="list"></Transfer>
import Transfer from "../../components/Transfer/Transfer.vue"


let arr = [
  {
    key: "8003",
    label: "李顺胜"
  },
  {
    key: "8002",
    label: "王萧"
  },
  {
    key: "8001",
    label: "可儿"
  },
  {
    key: "30383",
    label: "谷张三"
  }
]
const list = ref(
  arr
)

子组件接受参数 
<template>
    <el-transfer v-model="ritvalue" :data="data" />
    {{ ritvalue }}
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue'
  const op =defineProps({
    list: {
    type: Array ,
    default: ''
  }
})
  interface Option {
    key: number
    label: string
    disabled: boolean
  }
  //选中默认
  const ritvalue = ref([0])
op.list.map((item, index) => {
    ritvalue.value.push(index+1) 
  })

  const generateData = () => {
  const data: Option[] = []
  //默认左边赋值
  op.list.map((item, index) => {
    data.push({
      key: index,
      label: item.label,
      id: "",
    })
  })
  return data
}
  
  const data = ref<Option[]>(generateData())
  const value = ref([])
  </script>