element-plus穿梭框案例

<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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值