this.rightDataList.map(item => {
if (item.selected) {
this.rightData.push(item)
}
})
}
},
selectedAllArea () { // 已选中区域全选反选
if (this.selectedAllButtonStatus) {
this.removeAllSelected(this.rightDataList);
this.rightData = [];
} else {
this.rightDataList.map(item => this.$set(item, 'selected', true));
this.rightData = this.rightDataList;
}
this.selectedAllButtonStatus = !this.selectedAllButtonStatus;
},
transferToLeft () { // 从已选中列表区域退回待转发区域
if (this.rightData && this.rightData.length !== 0) {
this.rightDataList = this.rightDataList.filter(item => {
if (!item.selected) {
return item;
}
})
this.rightData = [];
}
},
removeAllSelected (list) { // 清空选中状态
list.map(item => this.$delete(item, 'selected'));
}
},
watch: {
'rightDataList' (newValue, oldValue) { // 选择列表的值变动响应外部值的变动
if (newValue.length !== this.rightData.length) {
this.selectedAllButtonStatus = false;
} else {
if (newValue.length === 0) {
this.selectedAllButtonStatus = false;
} else {
this.selectedAllButtonStatus = true;
}
}
this.$emit('update:selectedData', newValue);
}
}
}
</script>
<style scoped lang="scss">
ul {
padding: 0;
margin: 0;
max-height: 100%;
overflow-y: auto;
li {
cursor: pointer;
text-align: center;
padding: 5px;
&.active,
&:hover {
background: #e4e8f1;
color: #48576a;
}
}
}
.manyAreaSelect {
position: relative;
z-index: 2005;
.item {
border: 1px solid #d1dbe5;
background: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
display: inline-block;
vertical-align: middle;
min-width: 180px;
box-sizing: border-box;
position: relative;
height: 100%;
min-height: 260px;
}
.item-title {
height: 36px;
line-height: 36px;
background: #fbfdff;
margin: 0;
border-bottom: 1px solid #d1dbe5;
box-sizing: border-box;
color: #1f2d3d;
text-align: center;
}
.trangle {
background: transparent;
display: inline-block;
vertical-align: middle;
width: 40px;
box-sizing: border-box;
height: 100%;
position: relative;
.trangle-wrap {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.left,
.right {
margin: 10px 5px;
}
;
}
.item-content {
font-size: 13px;
height: 190px;
padding: 8px 2px;
}
.item-footer {
padding: 5px 0;
