element ui 官網里介紹了穿梭框（Transfer），但在實際使用過程中，會出現一些問題：

1.穿梭框里能放置的內容太少，不能滿足復雜的業務需求。

2.當選項過多時，穿梭框很難實現分頁，左右兩個框的分頁是聯動的，左邊翻頁了右邊也會跟著翻頁。若要取消這種關聯關系，可參考這篇文章： https://www.cnblogs.com/alice-bj/articles/10703903.html#_label4

本文參考了穿梭框的實現思路，實現了可分頁的表格穿梭框，同時涉及到了表格多選與表格里添加表單等知識點。

html結構：

<el-form :inline="true" :model="staffTemp"><el-form-item label="手機號"><el-input v-model="staffTemp.phone"></el-input></el-form-item><el-form-item><el-button type="primary" @click="getStaffList">查找</el-button></el-form-item> </el-form> <el-row :gutter="20"><el-col :span="11"><el-tableref="staffTable"v-loading="listLoading":key="tableKey":data="staffList"borderfithighlight-current-row@selection-change="handleStaffChange"><el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column><el-table-column label="手機" align="center"><template slot-scope="{row}"><span>{{ row.phone }}</span></template></el-table-column><el-table-column label="昵稱" align="center"><template slot-scope="{row}"><span>{{ row.nickName }}</span></template></el-table-column></el-table></el-col><el-col :span="2" style="text-align:center;"><el-button@click="addStaff"type="primary":disabled="!staffData.length"icon="el-icon-arrow-right"circle></el-button><el-button@click="removeStaff"type="primary":disabled="!selectedStaffData.length"icon="el-icon-arrow-left"circlestyle="margin-left: 0;margin-top: 10px;"></el-button></el-col><el-col :span="11"><el-tableref="selectedStaffTable"v-loading="listLoading":key="tableKey":data="selectedStaffList"borderfithighlight-current-row@selection-change="handleSelectedStaffChange"><el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column><el-table-column label="手機" align="center"><template slot-scope="{row}"><span>{{ row.phone }}</span></template></el-table-column><el-table-column label="昵稱" align="center"><template slot-scope="{row}"><span>{{ row.nickName }}</span></template></el-table-column><el-table-column label="類型" align="center"><template slot-scope="{row}"><el-select class="filter-item" placeholder="請選擇" v-model="row.staffTypeId"><el-optionv-for="item in staffOptions":key="item.key":label="item.display_name":value="item.key"></el-option></el-select></template></el-table-column></el-table></el-col> </el-row>

?js部分：

data() {return {listLoading: true,staffTemp: {phone: "",nickName: "",staffTypeId: ""},staffList: [],selectedStaffList: [],staffData: [],selectedStaffData: [],tableKey: 0,rowKey: "rowKey",staffOptions: [{ key: 28, display_name: "補貨員" },{ key: 29, display_name: "測試員" }],} }, methods: {// 從后臺獲取左邊表格的數據 getStaffList() {fetchStaffList(this.staffTemp).then(res => {if (res.value.staff.length === 0) {alert("查無此人");}this.staffList = res.value.staff;});},// 將左邊表格選擇項存入staffData中 handleStaffChange(rows) {this.staffData = [];if (rows) {rows.forEach(row => {if (row) {this.staffData.push(row);}});}},// 左邊表格選擇項移到右邊 addStaff() {setTimeout(() => {this.$refs["staffTable"].clearSelection();this.$refs["selectedStaffTable"].clearSelection();}, 0);let repeat = false;this.selectedStaffList.forEach(item => {if (this.staffData[0] && item.phone === this.staffData[0].phone) {repeat = true;alert("此員工已添加");return;}});if (repeat === false) {this.staffData.forEach(item => {this.selectedStaffList.push(item);});for (let i = 0; i < this.staffList.length; i++) {for (let j = 0; j < this.staffData.length; j++) {if (this.staffList[i] &&this.staffData[j] &&this.staffList[i].phone === this.staffData[j].phone) {this.staffList.splice(i, 1);}}}}},// 右邊表格選擇項移到左邊removeStaff() {setTimeout(() => {this.$refs["staffTable"].clearSelection();this.$refs["selectedStaffTable"].clearSelection();}, 0);this.selectedStaffData.forEach(item => {this.staffList.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].phone === this.selectedStaffData[j].phone) {this.selectedStaffList.splice(i, 1);}}}},// 將右邊表格選擇項存入selectedStaffData中 handleSelectedStaffChange(rows) {this.selectedStaffData = [];if (rows) {rows.forEach(row => {if (row) {this.selectedStaffData.push(row);}});}},// 提交 modifyStaff() {let isEmpty = false;this.selectedStaffList.forEach(item => {if (!item.staffTypeId) {alert("請選擇類型");isEmpty = true;return;}});if (isEmpty === false) {editStaff(this.selectedStaffList, this.deviceQuery.id).then(res => {this.staffListVisible = false;this.$notify({title: "成功",message: "修改成功",type: "success",duration: 2000});});}} }

多選表格：手動添加一個 el-table-column，設type屬性為 selection 即可；當選擇項發生變化時會觸發 selection-change 事件，并將選擇項作為參數傳入。在這里，我們將左邊表格的選擇項緩存在staffData中，右邊表格的選擇項緩存在 selectedStaffData 中。

在移動選擇項時，一是要將自身的該項刪除，二是要將該項放入對方列表中（需要去重）。

關于分頁功能可在左右兩個表格分別添加，互不影響，具體可參考我之前的博客?https://www.cnblogs.com/zdd2017/p/11153527.html

轉載于:https://www.cnblogs.com/zdd2017/p/11188307.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的vue2.0 + element ui 实现表格穿梭框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。