uni-app 开发技巧：复选框list选择后value传多值问题

最新推荐文章于 2023-10-12 10:25:04 发布

原创最新推荐文章于 2023-10-12 10:25:04 发布 · 1.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #js #vue

本文介绍了如何使用JSON.stringify和JSON.parse处理前端checkbox组件的多选状态，通过changeCheckbox和allChoose方法实现全选功能，并展示了如何在列表中存储和操作选择的数据。

解决方案：1、

将 value 的多条信息用JSON.stringify(item)转化为字符串传入

2、将checked的列表获取到后，将value值用JSON.parse(item)由字符串转化对象，然后就可以获取到选择的数据了

checked = e.detail.value;
               checked.map(function(item) {
                   _this.checkedArr.push(JSON.parse(item))
               })

			// 多选复选框改变事件
			changeCheckbox(e) {
				this.checkedArr = []
				var checked = []
				var _this = this

				checked = e.detail.value;
				checked.map(function(item) {
					_this.checkedArr.push(JSON.parse(item))
				})
				// this.checkedArr.push(){
				// 	key:e.detail.value,
				// 	value:
				// })
				// console.log(e.toString())
				// 如果选择的数组中有值，并且长度等于列表的长度，就是全选
				if (this.checkedArr.length > 0 && this.checkedArr.length == this.vehicleList.length) {
					this.allChecked = true;
				} else {
					this.allChecked = false;
				}
			},

			// 全选事件
			allChoose(e) {
				let chooseItem = e.detail.value;
				this.checkedArr = []
				// 全选
				if (chooseItem[0] == 'all') {
					this.allChecked = true;
					for (let item of this.vehicleList) {
						// let itemVal = String(item.vehicleId);
						if (!this.checkedArr.includes(item)) {
							this.checkedArr.push(item);
						}
					}
				} else {
					// 取消全选
					this.allChecked = false;
					this.checkedArr = [];
				}
			},

<view class="padding-top-sm margin-top-l">
			<block v-if="vehicleList.length > 0">
				<checkbox-group class="block" @change="changeCheckbox">
					<view class="border-item task-item radius" v-for="(item,index) in vehicleList"
						:data-vehicleId="item.vehicleId">
						<view class="flex  item-text-time">
							<view class="basis-df text-left custom-item-inner">
								<checkbox :value="JSON.stringify(item)" class="round blue"
									:checked="checkedArr.includes(item)" :class="{'checked':checkedArr.includes(item)}">
								</checkbox>

								<text class="custom-item-inner">{{item.vehicleName}}</text>
							</view>
							<view class="basis-lg text-right custom-item-inner">
								<text class="custom-item-inner">{{item.vehicleWidth}}米</text>
								<text class="custom-item-inner">{{item.vehicleType}}</text>
								<image style="width: 15px; height: 15px; " mode="aspectFit"
									src="../../static/item/modify.png" @error="imageError"></image>
							</view>

						</view>
						<view class="flex item-text-time">
							<view class="basis-lg flex text-bottom">
								<text>{{item.vehicleOwner}}</text>
								<text>{{item.phone}}</text>
							</view>
							<view class="basis-lg flex text-bottom">
								<text>身份证</text>
								<text>{{item.idNumber}}</text>
							</view>
						</view>

					</view>
				</checkbox-group>
			</block>
			<block v-else>
				<view class="noData margin-top-xxl">
					<image src="../../static/sample/icon_no_data.png" mode="widthFix" class="noDataImg"></image>
					<view>暂无车辆信息数据，请添加</view>
					<slot></slot>
				</view>
			</block>

		</view>
		<view class="foot-btn">
			<block v-if="vehicleList.length > 0">
				<checkbox-group @change="allChoose">
					<label>
						<checkbox value="all" class="round blue all-selected" :class="{'checked':allChecked}"
							:checked="allChecked?true:false">
						</checkbox> 全选
					</label>
				</checkbox-group>
				<button class="btn-qualify" @tap="saveSelected">保存</button>
			</block>
			<block v-else>
				<button class="btn-qualify" @tap="addRecordInfo">新增</button>
			</block>
		</view>