I encountered the shuttle box function in a recent project, and I will summarize its process:
renderings
the code
-
template
<template> <div class="transfer"> <el-tabs v-model="activeName" @tab-click="tabChange"> <el-tab-pane v-for="(item,index) in conditionList" :key="index+'only'" :label="item.condition" :name="item.condition"> <div v-if="item.condition === '院区'"> <el-row :gutter="20" class="condition-table"> <!-- 左侧 --> <el-col :span="11" style="padding-left:0"> <div class="no-add"> <span>未添加</span> <el-pagination @size-change="changePageSize" :current-page.sync="staffLeft.current" @current-change="pageIndexChange" :total="staffLeft.staffLeftList.length" layout="prev,pager,next"></el-pagination> </div> <el-table ref="staffTable" height="350" border v-loading="listLoading" :row-key="getRowKeyLeft" :data="staffLeft.staffLeftList.slice((current-1)*pageSize,current*pageSize)" @selection-change="handleStaffChange" :header-cell-style="{background:'#f5f8ff'}"> <el-table-column type="selection" align="center" :reserve-selection="true" width="55"></el-table-column> <el-table-column label="名称" align="center" width="150px" show-overflow-tooltip> <template slot-scope="{row}"> <span>{ { row.name}}</span> </template> </el-table-column> <el-table-column label="编码" align="center" show-overflow-tooltip> <template slot-scope="{row}"> <span>{ { row.number}}</span> </template> </el-table-column> <el-table-column label="状态" align="center"> <template slot-scope="{row}"> <el-switch v-model="row.status=='enable'?true:false"></el-switch> </template> </el-table-column> </el-table> </el-col> <!-- 图标 --> <div class="icon-center"> <p class="icon-right-if icon-return" @click="addStaff(item.condition)" v-if="staffLeft.staffLeftList.length>0"> <i class="el-icon-arrow-left"></i> </p> <p class="icon-right-else icon-return" v-else> <i class="el-icon-arrow-left"></i> </p> <p class="icon-right-if" @click="removeStaff(item.condition)" v-if="selectedStaffList.length>0"> <i class="el-icon-arrow-left"></i> </p> <p class="icon-right-else" v-else> <i class="el-icon-arrow-left"></i> </p> </div> <!-- 右侧 --> <el-col :span="11" style="padding-right:0"> <div class="no-add"> <span>已添加</span> <el-pagination @size-change="changeRightPageSize" @current-change="currentChange" :current-page.sync="pageRightNumber" small layout="prev, pager, next" :total="selectedStaffList.length"> </el-pagination> </div> <el-table ref="selectedStaffTable" height="350" border v-loading="listLoading" :row-key="getRowKeyRight" :data="selectedStaffList.slice((pageRightNumber-1)*pageRightSize,pageRightNumber*pageRightSize)" @selection-change="handleSelectedStaffChange" :header-cell-style="{background:'#f5f8ff'}"> <el-table-column type="selection" align="center" :reserve-selection="true" width="55"></el-table-column> <el-table-column label="名称" align="center" width="150px" show-overflow-tooltip> <template slot-scope="{row}"> <span>{ { row.name}}</span> </template> </el-table-column> <el-table-column label="编码" align="center" show-overflow-tooltip> <template slot-scope="{row}"> <span>{ { row.number}}</span> </template> </el-table-column> <el-table-column label="状态" align="center"> <template slot-scope="{row}"> <el-switch v-model="row.status=='enable'?true:false"></el-switch> </template> </el-table-column> </el-table> </el-col> </el-row> </div> </el-tab-pane> </el-tabs> </div> </template> -
data
data() { return { current: 1, pageSize: 10, pageRightNumber: 1, pageRightSize: 10, activeName: '院区', staffLeft: { //院区左边表格数据 //totalRow:0, staffLeftList: [ //项目中调用接口获取数据，此处是模拟数据 { id: "1", name: "院区1", number: "9", status: "enable" }, { id: "2", name: "院区2", number: "8", status: "enable" }, { id: "3", name: "院区3", number: "7", status: "enable" }, { id: "4", name: "院区4", number: "6", status: "enable" }, { id: "5", name: "院区5", number: "9", status: "enable" }, { id: "6", name: "院区6", number: "8", status: "enable" }, { id: "7", name: "院区7", number: "7", status: "enable" }, { id: "8", name: "院区8", number: "6", status: "enable" }, { id: "9", name: "院区9", number: "9", status: "enable" }, { id: "10", name: "院区10", number: "8", status: "enable" }, { id: "11", name: "院区11", number: "7", status: "enable" } ] }, conditionList: [{ name: "条件", condition: "院区", }], selectedStaffList: [], //右边表格 listLoading: false, }; }, -
methods
// 行数据的Key getRowKeyLeft(row) { return row.id; }, getRowKeyRight(row) { return row.id; }, tabChange() { this.current = 1; this.pageRightNumber = 1; }, pageIndexChange(current) { this.current = current; }, changePageSize(val) { this.pageSize = val; this.tabChange(); }, changeRightPageSize(val) { this.pageRightSize = val; }, handleSizeChange(val) { this.pageSize = val; }, handleCurrentChange(val) { this.current = val; }, currentChange(val) { this.pageRightNumber = val; }, // 将左边表格选择项存入staffLeftSaveData中(后面与右边的对比，右边已存在再不添加) handleStaffChange(rows) { this.staffLeftSaveData = []; if (rows) { rows.forEach(row => { if (row) { this.staffLeftSaveData.push(row); } }); } }, // 左边表格选择项移到右边 addStaff(type) { let repeat = false; setTimeout(() => { this.$refs["staffTable"][0].clearSelection(); this.$refs["selectedStaffTable"][0].clearSelection(); }, 0); for (const item of this.selectedStaffList) { if (this.staffLeftSaveData[0] && item.id === this.staffLeftSaveData[0].id) { repeat = true; this.$message.error(`该${ type}已添加`); return; } } if (!repeat) { this.staffLeftSaveData.forEach(item => { this.selectedStaffList.push(item); }); for (let i = 0; i < this.staffLeft.staffLeftList.length; i++) { for (let j = 0; j < this.staffLeftSaveData.length; j++) { if (this.staffLeft.staffLeftList[i] && this.staffLeftSaveData[j] && this.staffLeft.staffLeftList[i].name === this.staffLeftSaveData[j].name) { this.staffLeft.staffLeftList.splice(i, 1); } } } } if (this.staffLeft.staffLeftList.length === 0 && this.current !== 1) { this.current--; } }, // 右边表格选择项移到左边 removeStaff(type) { setTimeout(() => { this.$refs["staffTable"][0].clearSelection(); this.$refs["selectedStaffTable"][0].clearSelection(); }, 0); this.selectedStaffData.forEach(item => { this.staffLeft.staffLeftList.push(item); }); for (let i = 0; i < this.selectedStaffList.length; i++) { for (let j = 0; j < this.selectedStaffData.length; j++) { if (this.selectedStaffList[i] && this.selectedStaffData[j] && this.selectedStaffList[i].id === this.selectedStaffData[j].id) { this.selectedStaffList.splice(i, 1); } } } }, // 将右边表格选择项存入selectedStaffData中 handleSelectedStaffChange(rows) { this.selectedStaffData = []; if (rows) { rows.forEach(row => { if (row) { this.selectedStaffData.push(row); } }); } } -
css
<style scoped lang="less"> .transfer { width: 1160px; box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%); padding: 30px; margin: 50px; .condition-table { display: flex; justify-content: space-between; align-items: center; /deep/.el-table__body-wrapper { overflow-y: auto; } /deep/.el-table__body-wrapper::-webkit-scrollbar { width: 12px; height: 12px; } /deep/.el-table__body-wrapper::-webkit-scrollbar-thumb { background-color: #9093994d; border-radius: 6px; } } .el-icon-arrow-left { font-size: 21px !important; background: #d9d9d9; border-radius: 4px; color: #fff; padding: 2px; } /deep/ .el-popover__reference-wrapper { vertical-align: middle !important; padding-left: 4px; } .icon-right-if .el-icon-arrow-left { background: #409eff; color: #fff; } .icon-center { i { margin-top: 8px; &:hover { cursor: pointer; } } .icon-return { transform: rotate(180deg); } } .no-add { display: flex; justify-content: space-between; height: 30px; line-height: 30px; font-size: 14px; margin-bottom: 10px; span { color: #333; } } } </style>