ElementUI穿梭框添加按住shift多选功能

最新推荐文章于 2024-05-10 16:10:34 发布

水瓶紫罗兰

最新推荐文章于 2024-05-10 16:10:34 发布

阅读量2.8k

点赞数 1

分类专栏： Vue+elementUi+webpack踩坑

本文链接：https://blog.csdn.net/qq_28584841/article/details/84402692

版权

Vue+elementUi+webpack踩坑专栏收录该内容

6 篇文章 0 订阅

订阅专栏

要求：elementUI版本2.2.2以上
http://element-cn.eleme.io/2.2/#/zh-CN/component/transfer
主要用的方法是
left-check-change 左侧列表元素被用户选中 / 取消选中时触发回调参数（当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组）
right-check-change 右侧列表元素被用户选中 / 取消选中时触发回调参数（当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组）

<body onmousedown="isKeyPressed(event)">
</body>
<script type="text/javascript">
  function isKeyPressed(event){
    if(event.shiftKey){
      window.sessionStorage.setItem("shiftKey",true);
    }else{
      window.sessionStorage.setItem("shiftKey",false);
    }
  }
</script>

页面元素：

<el-transfer v-model="formInline.warehouseList" filterable :props="{key: 'id',label: 'name'}" :data="warehouseList" titles="[左边数据,右边数据]"  :left-default-checked="hasCheckedWHLeftData" @left-check-change="handleWHLeftChange" :right-default-checked="hasCheckedWHRightData" @right-check-change="handleWHRightChange"></el-transfer>

自己定义以下字段：

firstWHLeftLocation:-1,//数据左边起始值
lastWHLeftLocation:-1,//数据左边终止值
hasCheckedWHLeftData:[],//数据左边选中的数据
firstWHRightLocation:-1,//数据右边起始值
lastWHRightLocation:-1,//数据右边终止值
hasCheckedWHRightData:[],//数据右边选中的数据

methods方法如下：

// 数据左侧列表元素被用户选中 / 取消选中时触发
handleWHLeftChange(key,key1){
     var _this=this;
     _this.hasCheckedWHLeftData=_this.commonChangeFuc(key,key1,_this.hasCheckedWHLeftData,_this.firstWHLeftLocation,_this.lastWHLeftLocation,_this.warehouseList,"id");
            },
            // 数据右侧列表元素被用户选中 / 取消选中时触发
            handleWHRightChange(key,key1){
                var _this=this;
                _this.hasCheckedWHRightData=_this.commonChangeFuc(key,key1,_this.hasCheckedWHRightData,_this.firstWHRightLocation,_this.lastWHRightLocation,_this.warehouseList,"id");
            },
            // 公共按住shift 多选
            commonChangeFuc(key,key1,hasCheckedData,firstLocation,lastLocation,arrList,value){
                var _this = this;
                var cFlag=false;//取消勾选
                for(var i=0;i<key.length;i++){
                    if(key[i] == key1[0]){
                        cFlag=true;//选中
                    }
                }
                if(cFlag){
                    if(key.length == 1){
                        firstLocation=0;
                        hasCheckedData.push(key[0]);
                    }else if(key.length > 1){
                        // 当前有选中数据 并且 按住shift  
                        if(window.sessionStorage.getItem("shiftKey") === "true"){
                            for(var i=0;i<arrList.length;i++){
                                if(arrList[i][value] == key[key.length-2]){
                                    firstLocation=i;
                                    // break;
                                }
                                if(arrList[i][value] == key1[0]){
                                    lastLocation=i;
                                    // break;
                                }
                            }
                            // 只有起始值和最终值都存在 选中项即为中间值
                            if(firstLocation!=-1 && lastLocation!=-1){
                                if(firstLocation < lastLocation){
                                    for(var k=0;k<arrList.length;k++){
                                        if(k>=firstLocation && k<=lastLocation){
                                            hasCheckedData.push(arrList[k][value]);
                                        }
                                    }
                                }else if(firstLocation > lastLocation){
                                    for(var k=0;k<arrList.length;k++){
                                        if(k>=lastLocation && k<=firstLocation){
                                            hasCheckedData.push(arrList[k][value]);
                                        }
                                    }
                                }
                            }
                        }else{//不再按shift
                            hasCheckedData.push(key1[0]);
                        }
                    }
                }else{//取消选中的
                    hasCheckedData=[];
                    for(var i=0;i<key.length;i++){
                        if(key[i] != key1[0]){
                            hasCheckedData.push(key[i]);
                        }
                    }
                }
                // 去重
                hasCheckedData = new Set(hasCheckedData);
                hasCheckedData = Array.from(hasCheckedData);
                return hasCheckedData;
            },

结束了，自测目前没有问题。。。。。
有问题欢迎指点，谢谢！

水瓶紫罗兰

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
ElementUI穿梭框添加按住shift多选功能

要求：elementUI版本2.2.2以上http://element-cn.eleme.io/2.2/#/zh-CN/component/transfer主要用的方法是left-check-change 左侧列表元素被用户选中 / 取消选中时触发回调参数（当前被选中的元素的 key 数组、选中状态发生变化的元素的 key 数组）right-check-change 右侧列表元素被用户...
复制链接

扫一扫

专栏目录