vue 利用element的Table 表格实现自制的穿梭框(可以高度自定义)_vue 穿梭框



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-table
              ref="multipleTable"
              :data="currentPageData"
              highlight-current-row
              tooltip-effect="dark"
              height="460"
              style="width: 100%;height:460px;cursor:pointer;"
              :row-style="setColor"
              @current-change="lineClick"
            >
              <el-table-column
                label="日期"
                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)]
相关推荐
J总裁的小芒果6 分钟前
el-table 自定义列、自定义数据
前端·javascript·vue.js
晚风予星8 分钟前
简记|React+Antd中实现 tooltip、ellipsis、copyable功能组件
前端·react.js
brzhang15 分钟前
告别『上线裸奔』!一文带你配齐生产级 Web 应用的 10 大核心组件
前端·后端·架构
程序员Bears15 分钟前
深入理解CSS3:Flex/Grid布局、动画与媒体查询实战指南
前端·css3·媒体·visual studio code
工呈士22 分钟前
CSS in JS:机遇与挑战的思考
javascript·css
至尊童24 分钟前
五个JavaScript 应用技巧
javascript
David凉宸27 分钟前
凉宸推荐给大家的一些开源项目
前端
举个栗子dhy28 分钟前
编辑器、代码块、大模型AI对话中代码复制功能实现
javascript
袋鱼不重29 分钟前
Cursor 最简易上手体验:谷歌浏览器插件开发3s搞定!
前端·后端·cursor
hyyyyy!29 分钟前
《从分遗产说起:JS 原型与继承详解》
前端·javascript·原型模式