实现两个表格的数据传递(类似于穿梭框)

类似于element的

第一个表格信息以及按钮:

复制代码
<div style="height: 80%">
  <el-table :data="tableData1" border :cell-style="{'text-align':'center'}" style="width: 100%;"
            ref="multipleTable1"
            @selection-change="handleSelectionChange1"
            tooltip-effect="dark"
            height="100%">
    <el-table-column type="selection" width="50" label="序号" align="center"></el-table-column>
    <el-table-column prop="wellId" label="井号" align="center"></el-table-column>
    <el-table-column prop="fracturingPressure" label="破裂压力(Mpa)" align="center"></el-table-column>
    <el-table-column prop="maxWellSafetyInjectionPressure" label="井口安全最大注入压力(Mpa)"
                     align="center"></el-table-column>
    <el-table-column prop="countMethod" label="计算方法" align="center"></el-table-column>
  </el-table>
  <div class="bottomButton">
    <el-button style="margin-right: 20px" type="danger" @click="toggleSelection1"
               :disabled="multipleSelection1.length ? false : true">
      <span>清空选择</span>
    </el-button>
    <el-button style="margin-right: 20px" type="primary" @click="addMethod"><span>添加至计算</span>
    </el-button>
  </div>
</div>

第二个表格信息及按钮:

复制代码
<div style="height: 80%">
  <el-table :data="tableData2" border :cell-style="{'text-align':'center'}" style="width: 100%;"
            ref="multipleTable2"
            tooltip-effect="dark"
            @selection-change="handleSelectionChange2"
            height="100%">
    <el-table-column type="selection" width="50" label="序号" align="center"></el-table-column>
    <el-table-column prop="wellId" label="井号" align="center" width="120"></el-table-column>
    <el-table-column prop="interval" label="层段" align="center"></el-table-column>
    <el-table-column prop="safetyFactor" label="安全系数" align="center"></el-table-column>
    <el-table-column prop="skinFactor" label="表皮系数" align="center"></el-table-column>
    <el-table-column prop="addPressureDrop" label="附加压力降(Mpa)" align="center"></el-table-column>
    <el-table-column prop="avgFormationFracturePressure" label="平均地层破裂压力(Mpa)"
                     align="center"></el-table-column>
    <el-table-column prop="maxWellSafetyInjectionPressure" label="井口最大安全注入压力(Mpa)"
                     align="center"></el-table-column>
    <el-table-column prop="countMethod" label="计算方法" align="center"></el-table-column>
  </el-table>
  <div class="bottomButton">
    <el-button style="margin-right: 20px" type="danger" @click="removeMethod"
               :disabled="multipleSelection2.length ? false : true">
      <span>删除选择行</span>
    </el-button>
    <el-button style="margin-right: 20px" type="primary"><span>计算</span></el-button>
    <el-button style="margin-right: 20px" type="primary"><span>保存</span></el-button>
    <el-button style="margin-right: 20px" type="primary"><span>导出</span></el-button>
  </div>
</div>

实现多选绑定的方法:

复制代码
handleSelectionChange1(val) {
  this.multipleSelection1 = val;
},
handleSelectionChange2(val) {
  this.multipleSelection2 = val;
},

清空第一个表格中选中数据的方法:

复制代码
toggleSelection1() {
  this.$refs.multipleTable1.clearSelection();
},

实现将选中数据添加到第二个表格中,以及第二个表格实现回退效果的方法:

复制代码
addMethod() {
    //concat拼接数组到指定数组中
  this.tableData2 = this.tableData2.concat(this.multipleSelection1);
  this.handleRemoveTabList(this.multipleSelection1, this.tableData1);
  // 按钮禁用
  this.multipleSelection1 = [];
},
removeMethod() {
  this.tableData1 = this.tableData1.concat(this.multipleSelection2);
  this.handleRemoveTabList(this.multipleSelection2, this.tableData2);
  // 按钮禁用
  this.multipleSelection2 = [];

},
//第一个是选中的数组;第二个是表格数组
handleRemoveTabList(isNeedArr, originalArr) {
  if (isNeedArr.length && originalArr.length) {
    for (let i = 0; i < isNeedArr.length; i++) {
      for (let k = 0; k < originalArr.length; k++) {
        // 注意,id为唯一值,如果不为唯一值那么会出错
        if (isNeedArr[i]["id"] === originalArr[k]["id"]) {
            //splice() 方法用于添加或删除数组中的元素
          originalArr.splice(k, 1);
        }
      }
    }
  }
},

相关推荐
前端太佬7 分钟前
前端对接微信扫码登录:从踩坑到填坑的全记录
前端·javascript·微信
前端大白话31 分钟前
救命!这10个Vue3技巧藏太深了!性能翻倍+摸鱼神器全揭秘
前端·javascript·vue.js
前端大白话34 分钟前
前端人必看!10个JavaScript“救命”技巧,让你告别加班改Bug
前端·javascript·程序员
Rudon滨海渔村41 分钟前
【Tauri】桌面程序exe开发 - Tauri+Vue开发Windows应用 - 比Electron更轻量!8MB!
javascript·electron·tauri·桌面应用
cg50171 小时前
Vue回调函数中的this
前端·javascript·vue.js
程序猿大波1 小时前
基于Java,SpringBoot,Vue,HTML宠物相亲配对婚恋系统设计
java·vue.js·spring boot
前端太佬1 小时前
从零到一实现扫码登录:一个前端菜鸟的踩坑实录
前端·javascript·架构
yuanmenglxb20041 小时前
微信小程序核心技术栈
前端·javascript·vue.js·笔记·微信小程序·小程序
纪元A梦1 小时前
华为OD机试真题——绘图机器(2025A卷:100分)Java/python/JavaScript/C++/C/GO最佳实现
java·javascript·c++·python·华为od·go·华为od机试题
会飞的鱼先生1 小时前
Vue3的内置组件 -实现过渡动画 TransitionGroup
前端·javascript·vue.js·vue