element table穿梭框+分页

HTML部分： 

          <!-- 左侧表格 -->
          <el-col :span="11">
            <div>待选择</div>
            <el-table
              height="305"
              :data="data1.slice((currentPageNoSelected-1)*pagesizeNoSelected,currentPageNoSelected*pagesizeNoSelected)"
              border
              ref="selectionNoSelected"
              :row-key="row => row.id"
              @selection-change="checkAll"
              style="width: 100%">
              <el-table-column   :reserve-selection="true"  type="selection" width="50"></el-table-column>
              <el-table-column type="index" align="center" label="序号"></el-table-column>
              <el-table-column show-overflow-tooltip prop="name" label="姓名" align="center"> </el-table-column>
              <el-table-column show-overflow-tooltip prop="orgName" label="供电公司" align="center"></el-table-column>
              <el-table-column show-overflow-tooltip prop="description" label="职务" align="center"></el-table-column>
              <el-table-column show-overflow-tooltip prop="mobile" label="联系方式" align="center"></el-table-column>
            </el-table>
            <!--    待选择分页-->
            <el-pagination
              class="small-pagination"
              small
              :pager-count="3"
              style="margin-top:20px;"
              @size-change="handleSizeChangeNoSelected"
              @current-change="handleCurrentChangeNoSelected"
              :page-size="pagesizeNoSelected"
              :total="data1.length"
              :current-page="currentPageNoSelected"
              :page-sizes="[20, 40, 60,80,100]"
              layout="total, sizes, prev, pager, next,jumper"
            >
            </el-pagination>
          </el-col>
          <!-- 中间按钮 -->
          <el-col :span="2" style="" class="transfer-btn">
            <el-button style="padding:7px;padding-left: 10px;margin-top: 110px;"  :disabled="nowSelectData.length?false:true" size="mini" type="primary" @click="handelSelect">添加<i class="el-icon-d-arrow-right el-icon--right" style="margin: 0"></i></el-button>
            <el-button :disabled="nowSelectRightData.length?false:true" size="mini" type="primary" @click="handleRemoveSelect" style="margin-top:10px;margin-left:0px;padding:7px;"><i class="el-icon-d-arrow-left el-icon--right" style="margin: 0"></i>删除</el-button>
          </el-col>
          <!-- 右侧表格 -->
          <el-col :span="11">
            <div>已选择</div>
            <el-table   height="305"  :row-key="row => row.id" :data="selectArr.slice((currentPageSelected-1)*pagesizeSelected,currentPageSelected*pagesizeSelected)" border ref="selectionSelected" @selection-change="checkRightAll" style="width: 100%">
              <el-table-column :reserve-selection="true"  type="selection" width="50"></el-table-column>
              <el-table-column type="index" align="center" label="序号"></el-table-column>
              <el-table-column show-overflow-tooltip prop="name" label="姓名" align="center"> </el-table-column>
              <el-table-column show-overflow-tooltip prop="orgName" label="供电公司" align="center"></el-table-column>
              <el-table-column show-overflow-tooltip prop="description" label="职务" align="center"></el-table-column>
              <el-table-column show-overflow-tooltip prop="mobile" label="联系方式" align="center"></el-table-column>
            </el-table>
            <!--    已选择分页-->
            <el-pagination
              class="small-pagination"
              small
              :pager-count="3"
              style="margin-top:20px"
              @size-change="handleSizeChangeSelected"
              @current-change="handleCurrentChangeSelected"
              :page-size="pagesizeSelected"
              :total="selectArr.length"

              :current-page="currentPageSelected"
              :page-sizes="[20, 40, 60,80,100]"
              layout="total, sizes, prev, pager, next, jumper"
            >
            </el-pagination>
          </el-col>

data数据部分：

  data() {

    return {
      
      pagesizeNoSelected:20,// 待选择table 每页显示条数
      pagesizeSelected:20,// 已选择table 每页显示条数
      currentPageNoSelected:1,// 待选择table 当前第几页
      currentPageSelected:1,// 已选择 table  当前第几页
     
      selectArr:[],  // 右边列表
     
     
      data1:[], // 学员信息 左侧全部数据
      nowSelectData: [], // 左边选中列表数据
      nowSelectRightData: [], // 右边选中列表数据

    };
  },

js部分：

  // 待选择table 每页xx条
    handleSizeChangeNoSelected(val){
      this.pagesizeNoSelected = val
      this.currentPageNoSelected = 1 // 切换每页xx条后，页码回到第一页
      this.$refs.selectionNoSelected.clearSelection();
    },
    // 待选择table 当前第几页
    handleCurrentChangeNoSelected(val){
      this.currentPageNoSelected = val;
      this.$refs.selectionNoSelected.clearSelection();
    },
    // 已选择table 每页xx条
    handleSizeChangeSelected(val){
      this.pagesizeSelected = val
      this.currentPageSelected = 1 // 切换每页xx条后，页码回到第一页

      this.$refs.selectionSelected.clearSelection();
    },
    // 已选择table 当前第几页
    handleCurrentChangeSelected(val){
      this.currentPageSelected = val;
      this.$refs.selectionSelected.clearSelection();
    },




    // 左侧表格多选框勾选
    checkAll(val){
      this.nowSelectData = val;

    },
    // 右侧表格多选框勾选
    checkRightAll(val) {
      this.nowSelectRightData = val;
    },
    // 选中   添加 (逻辑：左边列表删除选中的数据，往右边列表中push  左侧删除的数据)
    handelSelect(){
      this.selectArr = this.handleConcatArr(this.selectArr, this.nowSelectData) // 往右侧表格添加数据
      this.handleRemoveTabList(this.nowSelectData,  this.data1);  // 左边数组删除 添加的数据
      console.log(this.nowSelectData,'添加之后 左侧选中的值')
      this.nowSelectData = []; // 清空左侧多选框

      this.currentPageNoSelected = 1 // 添加后，页码回到第一页
      this.$refs.selectionNoSelected.clearSelection();
   },
    // 取消
    handleRemoveSelect() {
      this.data1 = this.handleConcatArr(this.data1, this.nowSelectRightData)
      this.handleRemoveTabList(this.nowSelectRightData,  this.selectArr);
      this.nowSelectRightData = [];
      this.currentPageSelected = 1 // 添加后，页码回到第一页
      this.$refs.selectionSelected.clearSelection();
    },
    // 数组拼接
    handleConcatArr(selectArr, nowSelectData) {
      let arr = [];
      arr = arr.concat(selectArr, nowSelectData);
      return arr;
    },
    // 删除原来的数组的方法
    /**
     * isNeedArr: 表格选中的数据
     * originalArr：表格当前所有的数据
     * */
    handleRemoveTabList(isNeedArr,  originalArr) {
      if(isNeedArr.length && originalArr.length) {
         for(let i=0; i<isNeedArr.length; i++) {
            for(let k=0; k<originalArr.length; k++) {
              if(isNeedArr[i]["id"] === originalArr[k]["id"]) {
                originalArr.splice(k, 1);
              }
            }
         }
      }
    }

完成的效果：