右边的数据根据左边选中数据数量的改变而改变,左边数据仍在

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>

用,对你有用的话就点个赞叭): 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值