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)]
相关推荐
gnip2 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫3 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel4 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼5 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手8 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法8 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku9 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode9 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu9 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu9 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript