要求: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;
},
结束了,自测目前没有问题。。。。。
有问题欢迎指点,谢谢!