右边的数据根据左边选中数据数量的改变而改变,左边数据仍在
1、效果:
2、代码(复制可直接
<template>
<div>
<div class="container">
<div class="left_box">
<div @click="inviteAllPerson"
style="color:red;cursor: pointer">{{inviteAll==true?'取消全选':'全选'}}</div>
<div class="left_box_list"
v-for="(item,index) in invitePersonList"
:key="index">
<div>{{item.name}}</div>
<div>{{item.tel}}</div>
<div @click="changeInviteStatus(item,index)"
style="color:blue;cursor: pointer">{{item.isChecked==true?'取消选择':'点击选择'}}</div>
</div>
</div>
<div>>>></div>
<div class="right_box">
<div @click="deleteAllSelectedPerson"
v-if="selectedInvitedPerson.length>0"
style="color:red;cursor: pointer">全部清除</div>
<div class="left_box_list"
v-for="(item,index) in selectedInvitedPerson"
:key="index">
<div>{{item.name}}</div>
<div>{{item.tel}}</div>
<div @click="deleteSelectedPerson(item,index)"
style="color:blue;cursor: pointer">点我删除</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
inviteAll: false, // 是否全选
invitePersonList: [ // 左边数据
{
name: '王泽',
tel: '1529585496',
isChecked: false,
id: 1
},
{
name: '张花花',
tel: '1529585496',
isChecked: false,
id: 2
},
{
name: '王泽强',
tel: '1529585496',
isChecked: false,
id: 3
},
{
name: '李狗子',
tel: '1529585496',
isChecked: false,
id: 4
}
], // 邀请人员列表
selectedInvitedPerson: [],//右边数据
}
},
created () {
},
methods: {
//左边-全选
inviteAllPerson () {
this.inviteAll = !this.inviteAll
if (this.inviteAll) {
this.invitePersonList.map(item => item.isChecked = true)
for (var i = 0;i < this.invitePersonList.length;i++) {
if (this.selectedInvitedPerson.indexOf(this.invitePersonList[i]) === -1 && (this.invitePersonList[i]).isChecked == true) {
this.selectedInvitedPerson.push(this.invitePersonList[i]);
}
}
} else {
this.invitePersonList.map(item => item.isChecked = false)
for (var j = 0;j < this.invitePersonList.length;j++) {
let index = this.selectedInvitedPerson.findIndex(item => item.isChecked == false)
if (index != -1) {
this.selectedInvitedPerson.splice(index, 1)
}
}
}
},
// 左边点击后面的多选框
changeInviteStatus (item, index2) {
item.isChecked = !item.isChecked
// 判断当前数据是否都选中
let index1 = this.invitePersonList.findIndex(item => item.isChecked == false)
if (index1 != -1) {
this.inviteAll = false
} else {
this.inviteAll = true
}
if (item.isChecked) {
for (var i = 0;i < this.invitePersonList.length;i++) {
if (this.selectedInvitedPerson.indexOf(this.invitePersonList[i]) === -1 && (this.invitePersonList[i]).isChecked == true) {
this.selectedInvitedPerson.push(this.invitePersonList[i]);
}
}
} else {
for (var j = 0;j < this.invitePersonList.length;j++) {
let index = this.selectedInvitedPerson.findIndex(item => item.isChecked == false)
if (index != -1) {
this.selectedInvitedPerson.splice(index, 1)
}
}
}
},
// 右边删除全部
deleteAllSelectedPerson () {
this.inviteAll = false
this.selectedInvitedPerson = []
this.invitePersonList.map(item => item.isChecked = false)
},
// 右边删除一个
deleteSelectedPerson (item, index) {
this.inviteAll = false
let index1 = this.invitePersonList.findIndex(item1 => item1.id == item.id)
if (index1 != -1) {
this.invitePersonList[index1].isChecked = false
}
this.selectedInvitedPerson.splice(index, 1)
},
},
}
</script>
<style scoped>
.container {
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid green;
width: 900px;
}
.left_box {
width: 400px;
height: 500px;
display: flex;
flex-direction: column;
border: 1px solid pink;
background: pink;
}
.right_box {
width: 400px;
height: 500px;
display: flex;
flex-direction: column;
border: 1px solid pink;
background: pink;
}
.left_box_list {
margin-top: 20px;
display: flex;
align-items: center;
justify-content: space-around;
border: 1px solid pink;
background: pink;
}
</style>
用,对你有用的话就点个赞叭):