leyui穿梭框限制右边显示条数，但是内部并没有事件可以解决的问题

  今天公司项目遇到一个贼奇葩的问题，就是一个穿梭框左边是所有的功能标签，右边是启用的功能标签。

 

需求：是当右边标签大于等于7个时，选中左边的标签向右移动会提示不允许超过7个标签，并且右边的数据不会变化！

缺陷：当大于等于7个仍旧移动时会提示，但是拦截不了，也就是左边仍旧会移动到右边，要求优化。

先分享下我的思路：

1.利用穿梭框内部事件在移动之前将他处理掉！pass，根本处理不了，他们内部只爆露出来一个一个改变成功之后的回调函数 onchange（原本代码是在这拦截的，根本拦截不到，但这里已经改变了），别的都没有，大佬的话可以去改源码~~哈哈

2.进行判断当选中数据时调用多选框事件判断右边数据，对向右传送按钮进行disabled！pass！这个layui的穿梭框真的巨奇葩，用尽浑身解数都获取不到，

3.山穷水复疑无路，柳暗花明又一村。我看到了穿梭框的一个重载事件

transfer.reload(id,{title,data,value})

这个里面的数据其实跟渲染穿梭框时的数据很像

data表示你的所有数据，value就是表示右边数据的value数组

此时就可以设置value（数组）的值来重新渲染右边的数据，此时我们就需要一个中间数来储存每次穿梭成功后的右边的数据，当不满足我们的条件时将数据重载，废话少说看代码！

const { layer, transfer, util } = layui;
        // 左侧所有标签数据
        const dataList = data.leftMenuList;
        // 右侧已选标签
        let setList = data.rightMenuList;
        //储存每次穿梭之后的右边的数据
        let rightList22=data.rightMenuList;
        //  触发事件
        util.event('lay-on', {
            customSetOpen: function () {
                layer.open({
                    id: 'customSettingPop',
                    type: 1,
                    area: ['85%', '85%'],
                    shadeClose: true,
                    title: '常用功能设置',
                    content: $('#customSetPop'),
                });
                // 渲染穿梭框
                transfer.render({
                    elem: '#custom',
                    id: 'custombiaoqian',
                    title: ['选择标签功能', '已选'],
                    width: '44%',
                    data: dataList,
                    // 初始的右侧数据
                    value: setList,
                    onchange: function(data1,index){
                        //获取每次传递成功后右边的数组
                        var rightData = transfer.getData('customSettingTransfer');
                        //index=0表示从左往右移动
                        if(index ==0 && rightData && rightData.length > 7){
                            layer.alert("最多只能配置7个标签！");
                            //重点 重载函数
                            transfer.reload("custombiaoqian",{
                                title: ['选择标签功能', '已选'],
                                width: '44%',
                                data: dataList,
                                // 初始的右侧数据
                                value: rightList22,
                            })
                            return
                        }
                        //能到这一步说明满足我们的条件我们将右边数据用中间数存起来
                        //又因为其内部是通过filter将value进行转换的，
                          而我们得到的rightData是一个对象数组，所以我们要获取出来
                            其中每个对象的value值存起来
                        var list=[];
                            for (let i = 0; i <rightData.length ; i++) {
                            list[i]=rightData[i].value
                            }
                        rightList22=list;
                    },
                });
            },

  大功告成！我导师给我这个任务时，多次跟我说搞不出来就算了ps：因为我是搞java的，但是我不愿放弃，虽然用了半天的时间，但是还是做出来了！我们要努力不放弃！！一起加油！

最后给自己的公众号打个广告，有需要的去关注呀~~

 java相关问题、idea免费激活、软件设计师软考相关资料，java学习过程中用到的软件，毕设参考web系统（可直接运行）可以通过关注如下公众号获取

                                     java小菜鸟资料分享