表格穿梭框

关忆北_

已于 2023-10-09 09:38:53 修改

阅读量702

点赞数

CC 4.0 BY-SA版权

分类专栏：封装文章标签： elementui vue.js

于 2022-08-16 14:45:55 首次发布

本文链接：https://blog.csdn.net/notagoodwriter/article/details/126365925

封装专栏收录该内容

8 篇文章

订阅专栏

本文展示了如何使用Vue.js和Element UI库创建一个穿梭框组件。代码详细地描述了两个表格之间的数据交换过程，利用selection-change事件监听选中项，并实现向左或向右移动数据的功能。该组件适用于多选数据转移场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看看成品

多的不说少的不唠上代码

<template>
  <div class="bigbox">
    <!-- 左侧框 -->
    <div class="table-container">
      <!-- 左侧表格 -->
      <el-table
        ref="dxgrid"
        :data="currentPageData"
        highlight-current-row
        height="100%"
        @selection-change="leftArrChange"
        style="width: 100%; cursor: pointer"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column
          prop="label"
          label="名称"
          show-overflow-tooltip
          width="520"
        >
        </el-table-column>
      </el-table>
    </div>
    <!-- 中间框 -->
    <div class="select-to-right">
      <el-button size="mini" @click="turnLeft">向左 </el-button>
      <el-button size="mini" @click="turnRight">向右 </el-button>
    </div>
    <!-- 右侧框 -->
    <div class="table-container">
      <!-- 右侧表格 -->
      <el-table ref="yxgrid" :data="yxData" height="100%" @selection-change="rightArrChange">
        <el-table-column type="selection" width="55" />
        <el-table-column
          prop="label"
          label="名称"
          show-overflow-tooltip
          width="450"
        >
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPageData: [ 
        {
          label: 1,
          id: 1,
        },
        {
          label: 2,
          id: 2,
        },
        {
          label: 3,
          id: 3,
        },
        {
          label: 4,
          id: 4,
        },
        {
          label: 5,
          id: 5,
        },
        {
          label: 6,
          id: 6,
        },
      ], //左边的数据
      yxData: [], // 右侧表格数据
      leftArr: [], // 左侧选择的数据
      rightArr: [], // 右侧选择的数据
    };
  },
  methods: {
    leftArrChange(val) {
      this.leftArr = val;
    },
    rightArrChange(val) {
      this.rightArr = val;
    },
    // 将右侧数据转到左边
    turnLeft(){
      // 将右侧选择的数据  进行循环遍历
      this.rightArr.forEach((item, index) => {
        // 将数据插入到左边
        this.currentPageData.push(item)
        //再将左侧的数据进行删除
        this.yxData.forEach((l, i) => {
          if (item.id === l.id){
            this.yxData.splice(i, 1)
          }
        })
      })
    },
    // 将左侧数据转到右边
    turnRight(){
      // 将左侧选择的数据  进行循环遍历
      this.leftArr.forEach((item, index) => {
        // 将数据插入到右边
        this.yxData.push(item)
        //再将左侧的数据进行删除
        this.currentPageData.forEach((l, i) => {
          if (item.id === l.id){
            this.currentPageData.splice(i, 1)
          }
        })
      })
    }
  },
};
</script>

<style scoped lang="scss">
.bigbox {
  display: flex;
  justify-content: flex-start;
}
</style>

讲讲思路吧！

这里首先画页面分为三块左侧表格中间按钮右侧表格

用个大盒子套起来弹性盒排版

穿梭框主要实现原理就是

通过elementui表格的selection-change事件得到选中的数据循环遍历添加到另一侧然后在本侧删除掉

最后的新数据都在左右表格绑定的数据中