uniapp实现购物车全选、反选、单选功能

最新推荐文章于 2024-07-25 17:19:58 发布

Nuygnix__

最新推荐文章于 2024-07-25 17:19:58 发布

阅读量1.8k

点赞数 3

文章标签： uni-app javascript 前端

本文链接：https://blog.csdn.net/Nuygnix__/article/details/128203224

版权

我写的只是一个demo，主要实现了其功能，复制下列代码即可用。

<template>
	<view class="">
		<!-- 购物列表 html -->
		<view class="listCount">
			<checkbox-group @change="checkboxChange">
				<label class="listItem" v-for="item in carArr" :key="item.id">
					{{item.checked}}
					<view class="checkBox">
						<checkbox style="transform: scale(0.9)" :value="item.id" :checked="item.checked" />
					</view>

				</label>
			</checkbox-group>
		</view>
		<!-- 全选按钮 -->
		{{allchecked}}
		<checkbox-group @change="changeBook">
			<label>
				<checkbox style="transform: scale(0.9)" :checked="allchecked" /> 全选
			</label>
		</checkbox-group>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				allchecked: false,
				carArr: [{
						id: '1',
					},
					{
						id: '2',
					},
					{
						id: '3',
					},
				],
			};
		},
		methods: {
			/* 全选反选 */
			changeBook(e) {
				console.log(e)
				if (e.detail.value.length == 0) {
					this.carArr.forEach((item) => {
						// console.log(item, '取消')
						this.$set(item, "checked", false);
					});
					this.allchecked = false;
				} else {
					this.carArr.forEach((item) => {
						console.log(55);
						// console.log(item, '勾选')
						this.$set(item, "checked", true);
					});
					this.allchecked = true;
				}
			},
			checkboxChange(e) {
				if (e.detail.value.length == this.carArr.length) {

					this.allchecked = true;
				} else {
					this.allchecked = false;
				}
				this.carArr.forEach((item) => {
					if (e.detail.value.indexOf(item.id) != -1) {
						this.$set(item, "checked", true);

					} else {
						this.$set(item, "checked", false);

					}
				})


			},
		},
	};
</script>
<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>