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)]
相关推荐
CopyLower3 分钟前
提升 Web 性能:使用响应式图片优化体验
前端
南通DXZ4 分钟前
Win7下安装高版本node.js 16.3.0 以及webpack插件的构建
前端·webpack·node.js
什码情况4 分钟前
微服务集成测试 -华为OD机试真题(A卷、JavaScript)
javascript·数据结构·算法·华为od·机试
你的人类朋友43 分钟前
浅谈Object.prototype.hasOwnProperty.call(a, b)
javascript·后端·node.js
Mintopia1 小时前
深入理解 Three.js 中的 Mesh:构建 3D 世界的基石
前端·javascript·three.js
打瞌睡de喵1 小时前
JavaScript 空对象检测
javascript
前端太佬1 小时前
暂时性死区(Temporal Dead Zone, TDZ)
前端·javascript·node.js
Mintopia1 小时前
Node.js 中 http.createServer API 详解
前端·javascript·node.js
艾克马斯奎普特1 小时前
Vue.js 3 渐进式实现之响应式系统——第三节:建立副作用函数与被操作字段之间的联系
javascript·vue.js
xRainco1 小时前
Redux从简单到进阶(Redux、React-redux、Redux-toolkit)
前端