<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>
element-plus穿梭框案例
最新推荐文章于 2024-05-22 14:22:01 发布