element-plus穿梭框案例_elementplus穿梭框

<template>
  <div class="transfer-view">
    <div class="transfer-list" v-for="(item,index) in arr" :key="index">
      <button class="transfer-button" @click="updateTransfer(index)">修改</button>
    </div>
    <el-transfer v-model="value" @change="changeTransfer" :data="data" />
  </div>
</template>
 
<script lang="ts" setup>
import { ref } from 'vue'
 
interface Option {
  key: number
  label: string
  disabled: boolean
}
// 通过下标判断是哪一个穿梭框
const Index = ref<number|null>(null);
const arr = ref([1,2,3,4,5]);
const arr2 = ref({
  0:[],
  1:[],
  2:[],
  3:[],
  4:[],
});
 
const generateData = () => {
  const data: Option[] = []
  for (let i = 1; i <= 5; i++) {
    data.push({
      key: i,
      label: `Option ${i}`,
      disabled: false,
    })
  }
  return data
}
 
const data = ref<Option[]>(generateData());
const value = ref([]);
// 修改按钮绑定的点击事件
const updateTransfer =(index)=>{
  console.log(index);
  Index.value = index;
  value.value = arr2.value[index];  
}
// 穿梭框内容改变触发的事件
const changeTransfer=()=>{
  arr2.value[Index.value] = value.value;
}
</script>