2.
其实可以从最后的效果图看出这个自制的穿梭框，只是由两个table表格和两个按钮组成，只需要写其中逻辑事件即可完成穿梭框的效果，其中的事件主要分为“选中”，“穿梭”和“删除”，其实也只是关于数组的增，删，改，查这些基本操作。这篇博文主要参考了这位博主的文章：添加链接描述，看不懂我的博文可以到这位博主的文章下去看看，具体代码如下：

首先是左边的框框：
HTML:

<!-- 左边框框 --><div class="transferbox"><div class="topbox"><span style="color:#1E90FF;font-size:16px;font-weight: 550;">待选设备</span></div><div class="level searchbox"><el-input v-model="input" placeholder="请输入内容" style="width:300px" /><el-button type="primary" style="margin:0 0 0 20px">搜索</el-button></div><el-tableref="multipleTable":data="currentPageData"highlight-current-rowtooltip-effect="dark"height="460"style="width: 100%;height:460px;cursor:pointer;":row-style="setColor"@current-change="lineClick"><el-table-columnlabel="日期"width="430"><template slot-scope="scope">{{scope.row.date }}</template></el-table-column></el-table>

其中要重点注意:row-style="setColor"和@current-change=“lineClick”，这两个触发的事件分别是：选中改变颜色和选中点击的选项的数据。

中间的两个按钮：
HTML:

<!-- 中间按钮 --><div class="vertical center3 centrebtn"><el-button type="primary" icon="el-icon-arrow-right" @click="singleSel()" /><el-button type="primary" style="margin:20px 0 0 0" icon="el-icon-d-arrow-right" @click="mutiSel()" /></div>

右边的框框：
HTML:

 <!-- 右边框框 --><div class="transferbox"><div class="topbox"><span style="color:#1E90FF;font-size:16px;font-weight: 550;">已选设备</span></div>### 最后**文章到这里就结束了，如果觉得对你有帮助可以点个赞哦**![](https://img-blog.csdnimg.cn/img_convert/82c37a5ee0e54f9c0f2f59f26614086a.webp?x-oss-process=image/format,png)**文章到这里就结束了，如果觉得对你有帮助可以点个赞哦**[外链图片转存中...(img-puLQjwYm-1718720354042)]