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)]
相关推荐
qiyue772 分钟前
AI编程专栏(三)- 实战无手写代码,Monorepo结构框架开发
前端·ai编程
轻语呢喃6 分钟前
React智能前端:从零开始的识图学单词项目(一)
javascript·react.js·aigc
断竿散人6 分钟前
JavaScript 异常捕获完全指南(下):前端框架与生产监控实战
前端·javascript·前端框架
Danny_FD8 分钟前
Vue2 + Vuex 实现页面跳转时的状态监听与处理
前端
小飞悟9 分钟前
别再只会用 px 了!移动端适配必须掌握的 CSS 单位
前端·css·设计
安思派Anspire9 分钟前
LangGraph + MCP + Ollama:构建强大代理 AI 的关键(一)
前端·深度学习·架构
LRH10 分钟前
JS基础 - 基于 Generator + Promise 实现 async/await 原理
前端·javascript
Jolyne_11 分钟前
可配置永久生效的Table组件的封装过程
前端·react.js
自由逐风11 分钟前
前端小数点精度问题解析
javascript
断竿散人11 分钟前
JavaScript 异常捕获完全指南(上):从同步异步到 Promise 错误处理
前端·javascript·promise