穿梭框带分页（element-ui）

因为在项目中，穿梭框带有分页，使用elementui的时候，切换分页的时候，右侧的数据也跟着变化，于是自己手写了一个带分页的穿梭框，并且切换分页的时候，右侧数据不变化

<template>
    <div class="transfer">
        <div class="leftTransfer">
            <div class="leftTransfer_title">
                <el-checkbox :indeterminate="left.isIndeterminate" v-model="left.checkAll" @change="leftHandleCheckAllChange">{{left.title}}</el-checkbox>
                <span>{{left.transferDataChecked.length}}/{{left.transferData.length}}</span>
            </div>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="left.transferDataChecked" @change="leftHandleCheckedCitiesChange">
                <el-checkbox v-for="item in left.transferData" :label="item" :key="item.id">{{item.name}}</el-checkbox>
            </el-checkbox-group>
             <el-pagination
                class="pagination"
                @current-change="handleCurrentChange"
                layout="prev, pager, next"
                :total="page.total"
                >
            </el-pagination>
        </div>
        <div class="transferButton">
            <el-button type="primary" @click="push">》</el-button>
            <el-button type="primary" @click="del">《</el-button>
        </div>
        <div class="rightTransfer">
            <div class="rightTransfer_title">
                <el-checkbox :indeterminate="right.isIndeterminate" v-model="right.checkAll" @change="rightHandleCheckAllChange">{{right.title}}</el-checkbox>
                <span>{{right.transferDataChecked.length}}/{{right.transferData.length}}</span>
            </div>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="right.transferDataChecked" @change="rightHandleCheckedCitiesChange">
                <el-checkbox v-for="item in right.transferData" :label="item" :key="item.id">{{item.name}}</el-checkbox>
            </el-checkbox-group>
        </div>
    </div>
</template>

<script>
    export default {
        name:'transfer',
        data(){
            return {
                left:{
                    isIndeterminate:false,//半选按钮
                    checkAll:false,//是否点击全选
                    title:'left',
                    transferData:[],//穿梭框左侧全部数据
                    transferDataChecked:[]//穿梭框左侧选中数据
                },
                right:{
                    isIndeterminate:false,//半选按钮
                    checkAll:false,//是否点击全选
                    title:'right',
                    transferData:[],//穿梭框右侧全部数据
                    transferDataChecked:[]//穿梭框右侧选中数据
                },
                page:{
                    total:0,
                    pageNo:1,
                }
            }
        },
        created(){
            this.initTransferData(0,10)
        },
        methods:{
            // 初始化数据
            initTransferData(numstart,numend){
                for (let i = 0; i<=20; i++) {
                    this.left.transferData[i]='成都'+i
                }
                this.page.total=this.left.transferData.length
                this.left.transferData=this.left.transferData.map((item,index)=>{
                    return{
                        id:index,
                        name:item,
                        pageNo:this.page.pageNo
                    }
                }).slice(numstart,numend)
            },
            // 左侧是否点击全选
            leftHandleCheckAllChange(val){
                this.left.transferDataChecked = val ? this.left.transferData : [];
                this.left.isIndeterminate = false;
            },
            // 左侧勾选数据
             leftHandleCheckedCitiesChange(value) {
                let checkedCount = value.length;
                this.left.checkAll = checkedCount === this.left.transferData.length;
                this.left.isIndeterminate = checkedCount > 0 && checkedCount < this.left.transferData.length;
            },
             // 左侧是否点击全选
            rightHandleCheckAllChange(val){
                this.right.transferDataChecked = val ? this.right.transferData : [];
                this.right.isIndeterminate = false;
            },
            // 左侧勾选数据
            rightHandleCheckedCitiesChange(value) {
                let checkedCount = value.length;
                this.right.checkAll = checkedCount === this.right.transferData.length;
                this.right.isIndeterminate = checkedCount > 0 && checkedCount < this.right.transferData.length;
            },
            // 穿梭框选中数据
            push(){
                // 数据移到右侧
                this.right.transferData=[...this.right.transferData,...this.left.transferDataChecked].sort((a,b)=>{
                    return a.id-b.id
                })
                // 获得一个右边的数据，只有纯id
                let checkedIdArr = this.right.transferData.map((item) => {
                    return item.id
                })
                // 左侧数据删除
                this.left.transferData=this.left.transferData.filter(item=>{
                    if(!(checkedIdArr.includes(item.id))){
                        return item
                    }
                })
                // 每次推送完之后，重置选中框
                this.left.transferDataChecked=[]
                this.left.isIndeterminate = false;
                this.left.checkAll=false
            },
            // 穿梭框删除数据 回显的时候根据pageno回显到当前
            del(){
            	//过滤当前页选中的数据
                let arr = this.right.transferDataChecked.filter(item=>{
                    if(this.page.pageNo==item.pageNo){
                        return item
                    }
                })
                // 数据移到左侧
                this.left.transferData=[...this.left.transferData,...arr].sort((a,b)=>{
                    return a.id-b.id
                })
                // 获得一个右边的数据，只有纯id
                let checkedIdArr = this.right.transferDataChecked.map((item) => {
                    return item.id
                })
                // 删除选中的数据
                this.right.transferData=this.right.transferData.filter(item=>{
                    if(!(checkedIdArr.includes(item.id))){
                        return item
                    }
                })
                // 每次推送完之后，重置选中框
                this.right.transferDataChecked = []
                this.right.isIndeterminate = false;
                this.right.checkAll=false
            },
            handleCurrentChange(val){
                this.page.pageNo=val
                if(val==1){
                this.initTransferData(0,10)
                }else if(val==2){
                this.initTransferData(10,20)
                }else{
                this.initTransferData(20,30)
                }
                let rightId = this.right.transferData.map((item) => {
                    return item.id
                })
                this.left.transferData = this.left.transferData.filter(item => {
                    if (!(rightId.includes(item.id))) {
                        return item
                    }
                })
            }
        }
    }
</script>

<style lang="less" scoped>
.transfer{
    width: 60%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .transferButton{
        .el-button{
            display: block;
            margin: 10px 0;
        }
    }
    .leftTransfer,.rightTransfer{

        position: relative;
        width: 34%;
        height: 300px;
        border: 1px solid #000;
        .el-checkbox{
            display: block;
        }
        .pagination{
            position: absolute;
            bottom: 0;
        }
        .leftTransfer_title,.rightTransfer_title{
            display: flex;
            justify-content: space-between;
        }
    }
}


</style>