vue 用element 二次封装   的穿梭组件

时间:2024-03-28 20:25:39

vue 用element 二次封装   的穿梭组件

vue 用element 二次封装   的穿梭组件

//穿梭组件--自封装

<!--多选择   弹出的弹窗-->

1.<transfer @closeFun="closeFun" :title="transferTitle"  :status='infotags_show_edit'  :leftData='UsersList' :rightData='rightData' ></transfer>

2.import transfer from '@/components/transfer'

3.components: {transfer},

4.return {

        rightData:[], //选中数据--一般编辑时才有

        isAdd:false,

        UsersList: [],                             //数据库获取--转化后

        transferTitle:'权限选择',

        infotags_show_edit: false,                 //弹窗显示状态----选择弹窗

   }

5.父组件的方法

    //关闭弹窗

    closeFun(ids){

        if(this.isAdd){

            //添加---处理自己的逻辑

            this.addAccountForm.an_ids = ids[0]

        }else{

            //编辑---处理自己的逻辑

            this.BianJiAccountForm.an_ids = ids[0]

        }

        this.infotags_show_edit = false; 

    },

6.//获取权限列表数据----获取到数据后一定要转换处理  id  和  name

    getNodeList() {

        //参数

        let get = `${this.common.getData}&limit=${this.pagesize2}&page=${this.pageindex2}`

        this.https(this.apiList.getNodeList+`${get}`).then(response => {

                if (response.data.code == this.common.code) {

                    let data = response.data.data.rows

                    //格式化数据,方便子组件处理

                    for(let i=0;i<data.length;i++){

                        data[i]['id'] = data[i].an_id

                        data[i]['name'] = data[i].an_name

                    }

                    this.UsersList = data;    //列表数据

                }

                //弹窗提示

                this.tc_element(response.data.msg,response.data.code,2,"获取列表")

            }

        );

    },

7.//点击打开弹窗的事件--添加

    Choice_infotags_add() {

        this.isAdd = true

        this.infotags_show_edit = true;    //弹窗显示状态      

    },

8.//点击打开弹窗的事件--编辑弹窗

    Choice_infotags_edit() {

        this.isAdd = false

        this.infotags_show_edit = true;    

        let lists = this.BianJiAccountForm.an_ids.split(',')

        for(let i=0;i<this.UsersList.length;i++){

            for(let j=0;j<lists.length;j++){

                if(lists[j] == this.UsersList[i].an_id){

                    //转换数据  id  和 name

                    this.UsersList[i]['id'] = this.UsersList[i].an_id

                    this.UsersList[i]['name'] = this.UsersList[i].an_name

                    this.rightData.push(this.UsersList[i])

                }

            }

        }  

    },

 

 

组件内容:

<template>

    <!--选择   弹出的弹窗  添加-->

        <el-dialog :title="title" :visible.sync="status" width="900px" :before-close="handleClose">

            <div  class="xuanhe_tc">

                <div class="left-table">

                    <div>待选</div>

                    <el-table :data="UsersList1" style="width: 100%" @selection-change="handleSelectionChange_left" tooltip-effect="dark" ref="multipleTable" border>

                        <el-table-column type="selection" width="55"></el-table-column>

                        <el-table-column prop="id" label="id" width="60"></el-table-column>

                        <el-table-column prop="name" label="名称" width="180"></el-table-column>

                    </el-table>

                    <!--分页-->

                    <div class="block" hide-on-single-page>

                        <span class="demonstration"></span>

                        <el-pagination

                        @size-change="handleSizeChangeLeft"

                        @current-change="handleCurrentChangeLeft"

                        :current-page="pageindexLeft"

                        small

                        :pager-count="5"

                        :page-sizes="[10, 20, 30, 40,50]"

                        :page-size="pagesizeLeft"

                        layout="total,  prev, pager, next"

                        :total="countLeft"

                        ></el-pagination>

                    </div>

                </div>

                <div>

                    <div>

                        <el-button :disabled="leftBtnIsClick" type="primary" icon="el-icon-arrow-left" class="btn-check" @click="pushLeft">到左边</el-button>

                    </div>

                    <div>

                        <el-button :disabled="rightBtnIsClick" type="primary"  @click="pushRight">到右边<i class="el-icon-arrow-right el-icon--right"></i></el-button>

                    </div>

                </div>

                <div class="right-table">

                    <div>选中</div>

                    <el-table :data="UsersList2" style="width: 100%" @selection-change="handleSelectionChange_right" tooltip-effect="dark" ref="multipleTable" border>

                        <el-table-column type="selection" width="55"></el-table-column>

                        <el-table-column prop="id" label="id" width="60"></el-table-column>

                        <el-table-column prop="name" label="名称" width="180"></el-table-column>

                    </el-table>

                    <!--分页-->

                    <div class="block" hide-on-single-page>

                        <span class="demonstration"></span>

                        <el-pagination

                        @size-change="handleSizeChangeRight"

                        @current-change="handleCurrentChangeRight"

                        :current-page="pageindexRight"

                        small

                        :pager-count="5"

                        :page-sizes="[10, 20, 30, 40,50]"

                        :page-size="pagesizeRight"

                        layout="total,  prev, pager, next"

                        :total="countRight"

                        ></el-pagination>

                    </div>

                </div>

            </div>

    </el-dialog>

        

</template>

 

<script>

    export default {

        props:[

            "status",

            "leftData",

            "rightData",

            "title"

        ],

        data() {

            return {

                UsersList1:[] ,       //左边数据

                leftBtnIsClick:true,  //添加到左边按钮状态

                pagecountLeft: 1,     //总页数  ,默认1

                pagesizeLeft: 10,     //每页多少条  默认10

                pageindexLeft: 1,     //当前页  默认1

                countLeft: 1,         //总条数 默认1

                

                UsersListRight:[],     //右边总数据

                rightBtnIsClick:true,  //添加到右边你按钮状态

                UsersList2:[],         //右边数据

                pagecountRight: 1,     //总页数  ,默认1

                pagesizeRight: 10,     //每页多少条  默认10

                pageindexRight: 1,     //当前页  默认1

                countRight: 1,         //总条数 默认1

 

                selectList:[]          //选中数据

            };

        },

        created(){

            

        },

        watch:{

            status:function(newVal,oldVal){

                this.getNodeListLeft()

                this.getNodeListRight()

            }

        },

        methods:{

            //关闭弹窗

            handleClose(){

                let ids = this.formatIdFun()

                this.$emit('closeFun',[ids])

            },

            //左边分页

            handleSizeChangeLeft(val) {

            (this.pagesizeLeft = val), this.getNodeListLeft();

            },

            handleCurrentChangeLeft(val) {

            (this.pageindexLeft = val), this.getNodeListLeft();

            },

            //右边分页

            handleSizeChangeRight(val) {

            (this.pagesizeRight = val), this.getNodeListRight();

            },

            handleCurrentChangeRight(val) {

            (this.pageindexRight = val), this.getNodeListRight();

            },

            //获取列表数据--左边

            getNodeListLeft() {

                for(let a=0;a<this.rightData.length;a++){

                    for(let b=0;b<this.leftData.length;b++){

                        if(this.leftData[b].id == this.rightData[a].id){

                            this.leftData.splice(b,1)

                        }

                    }

                }

                this.countLeft = this.leftData.length;

                let shartPage = this.pageindexLeft*this.pagesizeLeft

                this.UsersList1 = []

                for(let i=0;i<this.leftData.length;i++){

                    if((shartPage-this.pagesizeLeft)<=i && i<shartPage){

                        this.UsersList1.push(this.leftData[i])

                    }

                }

            },

            //获取列表数据--右边   

            getNodeListRight() {

                this.countRight = this.rightData.length;

                let shartPage = this.pageindexRight*this.pagesizeRight

                this.UsersList2 = []

                for(let i=0;i<this.rightData.length;i++){

                    if((shartPage-this.pagesizeRight)<=i && i<shartPage){

                        this.UsersList2.push(this.rightData[i])

                    }

                }

            },

            //操作多选--左边

            handleSelectionChange_left(val) {

                this.rightBtnIsClick = false

                this.leftBtnIsClick = true

                this.selectList = val

            },

            //操作多选--右边

            handleSelectionChange_right(val) {

                this.leftBtnIsClick = false

                this.rightBtnIsClick = true

                this.selectList = val

            },

            //添加到左边

            pushLeft(){

                for (let i = 0; i < this.selectList.length; i++) {

                    //删除所有数据中

                    for(let b=0;b<this.rightData.length;b++){

                        if(this.rightData[b].id == this.selectList[i].id){

                            this.rightData.splice(b,1)

                        }

                    }

                    //删除第一页中

                    for(let j=0;j<this.UsersList2.length;j++){

                        if(this.UsersList2[j].id == this.selectList[i].id){

                            this.UsersList2.splice(j,1)

                            if(this.UsersList2.length == 0){

                                this.getNodeListRight()

                            }

                        }

                    }

                    //追加到左边

                    this.leftData.unshift(this.selectList[i])

                    this.getNodeListLeft()

                }

            },

            //添加到右边

            pushRight(){

                //添加右边

                for (let i = 0; i < this.selectList.length; i++) {

                    //删除所有数据中

                    for(let b=0;b<this.leftData.length;b++){

                        if(this.leftData[b].id == this.selectList[i].id){

                            this.leftData.splice(b,1)

                        }

                    }

                    //删除第一页中

                    for(let j=0;j<this.UsersList1.length;j++){

                        if(this.UsersList1[j].id == this.selectList[i].id){

                            this.UsersList1.splice(j,1)

                            if(this.UsersList1.length == 0){

                                this.getNodeListLeft()

                            }

                        }

                    }

                    //追加到右边

                    this.rightData.unshift(this.selectList[i])

                    this.getNodeListRight()

                }

            },

            //将右边选中数据--提取id到列表

            formatIdFun() {

                let ids = ''

                let data = this.rightData;

                for (let i = 0; i < data.length; i++) {

                    if(ids == ''){

                        ids = data[i].id

                    }else{

                        ids = ids + ',' + data[i].id

                    } 

                }

                return ids

            },

        }

    }

</script>

 

<style lang="scss" scoped>

.btn-check{

    margin-top:100px;

    margin-bottom:20px;

}

</style>