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
    评论
可以考以下步骤将 Vue3 中的 Element Plus 穿梭转换为表格穿梭: 1. 创建表格及其数据 首先,需要创建一个表格及其数据,例如: ```html <el-table :data="tableData" style="width: 100%"> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> <el-table-column prop="address" label="Address"></el-table-column> </el-table> ``` ```javascript data() { return { tableData: [ { name: 'John', age: 20, address: 'New York' }, { name: 'Mary', age: 22, address: 'Los Angeles' }, { name: 'Tom', age: 25, address: 'Chicago' } ], leftList: [], rightList: [] }; } ``` 注意,这里还定义了 `leftList` 和 `rightList` 数组,用于存储穿梭的选中项。 2. 创建表格穿梭 接下来,需要创建一个包含两个穿梭和操作按钮的组件,例如: ```html <template> <div class="table-transfer"> <div class="table-transfer-left"> <el-table ref="leftTable" :data="leftList" style="width: 100%" @selection-change="handleSelectionChange('left')" > <el-table-column type="selection"></el-table-column> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> <el-table-column prop="address" label="Address"></el-table-column> </el-table> </div> <div class="table-transfer-buttons"> <el-button type="primary" icon="arrow-right" @click="transferRight"></el-button> <el-button type="primary" icon="arrow-left" @click="transferLeft"></el-button> </div> <div class="table-transfer-right"> <el-table ref="rightTable" :data="rightList" style="width: 100%" @selection-change="handleSelectionChange('right')" > <el-table-column type="selection"></el-table-column> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> <el-table-column prop="address" label="Address"></el-table-column> </el-table> </div> </div> </template> <script> export default { data() { return { leftList: [], rightList: [] }; }, methods: { transferRight() { const selection = this.$refs.leftTable.getSelection(); this.leftList = this.leftList.filter(item => !selection.includes(item)); this.rightList = this.rightList.concat(selection); }, transferLeft() { const selection = this.$refs.rightTable.getSelection(); this.rightList = this.rightList.filter(item => !selection.includes(item)); this.leftList = this.leftList.concat(selection); }, handleSelectionChange(type) { const table = type === 'left' ? this.$refs.leftTable : this.$refs.rightTable; const selection = table.getSelection(); this.$set(this, type + 'List', selection); } } }; </script> <style scoped> .table-transfer { display: flex; justify-content: space-between; align-items: center; } .table-transfer-left { width: 45%; } .table-transfer-buttons { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 10%; } .table-transfer-right { width: 45%; } </style> ``` 其中,`leftList` 和 `rightList` 分别代表左侧表格和右侧表格的数据,`transferRight` 和 `transferLeft` 分别代表将选中项从左侧移至右侧和从右侧移至左侧的方法,`handleSelectionChange` 方法用于监听选中项的变化。 3. 将穿梭替换为表格穿梭 最后,将原来的穿梭替换为表格穿梭即可。例如,将原来的代码: ```html <el-transfer v-model="value" :data="list"></el-transfer> ``` 替换为: ```html <TableTransfer :leftList="tableData" :rightList="[]"></TableTransfer> ``` 注意,这里的 `TableTransfer` 是前面创建的表格穿梭组件。同时,传入的 `leftList` 应该是表格的数据,`rightList` 初始值为空数组。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值