分为左右两部分，点击左侧部分的移入按钮，对应的内容出现在右侧，点击右侧的 移出按钮，对应的内容在右侧消失
<template>
<div>
<div style="border: 1px solid #ccc; padding-bottom: 15px">
<div
style="
border-bottom: 1px solid #ccc;
line-height: 37px;
padding-left: 15px;
font-weight: bold;
"
>
选择授权人员
</div>
<div style="display: flex; width: 100%">
<div class="left-part">
<div style="line-height: 30px">未下发人员</div>
<div style="font-size: 12px">列表为空</div>
<el-input
v-model="input"
placeholder="请输入姓名或者身份证或下发状态进行检索"
></el-input>
<div class="jiantou">
<div @click="moveIn" class="oneanniu">
<i class="el-icon-arrow-right"> </i>
</div>
<div @click="allmoveToRight" class="allButtons">
<i class="el-icon-d-arrow-right"> </i>
</div>
</div>
<div class="bottomBox">
<ul>
<li
:class="{active: isSelected(item.id)}"
v-for="item in items"
:key="item.id"
@click="moveToRight(item)"
>
{{ item.name }}
</li>
</ul>
</div>
</div>
<div class="right-part">
<div style="line-height: 30px">已下发人员</div>
<div style="font-size: 12px">共22个</div>
<el-input
v-model="input"
placeholder="请输入姓名或者身份证或下发状态进行检索"
></el-input>
<div class="jiantou">
<div @click="remove" class="oneanniu">
<i class="el-icon-arrow-left"> </i>
</div>
<div @click="allremoveFromRight11(item)" class="allButtons">
<i class="el-icon-d-arrow-left"> </i>
</div>
</div>
<div class="bottomBox" v-if="rightItems">
<ul>
<li
v-for="item in rightItems"
:key="item.id"
:class="{active: isSelected(item.id)}"
@click="moveToLeft(item)"
>
{{ item.name }}
</li>
</ul>
</div>
</div>
</div>
</div>
<div style="width: 50%; text-align: center;margin-top: 10px;">
<el-button type="primary" icon="el-icon-check" @click="push">提交</el-button>
<el-button type="danger" icon="el-icon-close" @click="close">关闭</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: "Item 1" },
{ id: 2, name: "Item 2" },
{ id: 3, name: "Item 3" },
{ id: 4, name: "Item 4" },
{ id: 5, name: "Item 5" },
{ id: 6, name: "Item 6" },
// ... 更多项
],
selectedItems: [],// 选中的数据id数组
moveArr: [],
rightItems: [], // 右边数组
input: "", //左侧input
};
},
methods: {
// 判断是否选中
isSelected(itemId) {
console.log(itemId,'hjuh')
return this.selectedItems.includes(itemId);
},
// 左侧点击选中
moveToRight(item) {
// console.log(this.selectedItems,'fjdfj')
const index = this.selectedItems.indexOf(item.id);
if (index === -1) {
// 如果项目尚未选中，则将其添加到 selectedItems 数组中
this.selectedItems.push(item.id);
} else {
// 如果项目已经选中，则从 selectedItems 数组中移除
this.selectedItems.splice(index, 1);
}
console.log(this.selectedItems, "selectedItems");
},
// 移入
moveIn() {
console.log(this.selectedItems, "selectedItems");
console.log(this.items,'items');
console.log(this.rightItems, "6666666666");
// 过滤掉选中的数据，并将选中的数据合并到右边数组
this.moveArr = this.items.filter(item => {
return this.selectedItems.includes(item.id);
});
this.rightItems = [...this.rightItems,...this.moveArr]
// 过滤掉右边数组的数据，并将右边数组的数据合并到左边数组
this.items = this.items.filter(item => {
return !this.selectedItems.includes(item.id);
});
console.log(this.items,'items');
console.log(this.rightItems, "6666666666");
this.moveArr = []
this.selectedItems = []
},
// 右侧点击选中
moveToLeft(item) {
const index = this.selectedItems.indexOf(item.id);
if (index === -1) {
// 如果项目尚未选中，则将其添加到 selectedItems 数组中
this.selectedItems.push(item.id);
} else {
// 如果项目已经选中，则从 selectedItems 数组中移除
this.selectedItems.splice(index, 1);
}
console.log(this.selectedItems, "selectedItems");
},
// 移出
remove() {
console.log(this.selectedItems, "selectedItems");
console.log(this.items,'items');
console.log(this.rightItems, "6666666666");
// 过滤掉选中的数据，并将选中的数据合并到左边数组
this.moveArr = this.rightItems.filter(rightItem => {
return this.selectedItems.includes(rightItem.id);
});
this.items = [...this.items,...this.moveArr]
// 更新右边数组，移除选中的数据
this.rightItems = this.rightItems.filter(rightItem => {
return !this.selectedItems.includes(rightItem.id);
});
console.log(this.items,'items');
console.log(this.rightItems, "6666666666");
this.moveArr = []
this.selectedItems = []
},
// 左侧所有
allmoveToRight() {
console.log(111);
this.rightItems = [...this.rightItems, ...this.items];
this.items = [];
},
// 右侧所有
allremoveFromRight11() {
this.items = [...this.items, ...this.rightItems];
this.rightItems = [];
},
push(){
},
close(){
}
},
};
</script>
<style scoped>
.left-part {
width: 50%;
padding-left: 15px;
/* border: 1px solid #ccc; */
margin-right: 5px;
}
.right-part {
width: 50%;
padding-left: 15px;
/* border: 1px solid #ccc; */
}
.active {
width: 100%;
background-color: #ccc;
}
.bottomBox {
/* margin-top: 5px; */
border: 1px solid #ccc;
height: 300px;
overflow: auto;
}
.jiantou {
display: flex;
justify-content: space-between;
width: 100%;
margin-top: 5px;
line-height: 30px;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
}
.oneanniu {
width: 50%;
text-align: center;
background-color: rgb(244, 244, 244);
}
.allButtons {
width: 50%;
text-align: center;
background-color: rgb(231, 231, 231);
}
ul {
list-style-type: none;
padding-left: 5px; /* 如果需要，还可以移除默认的左边距 */
}
</style>
