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

 解决方案:1、

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

<checkbox :value="JSON.stringify(item)" class="round blue"
            :checked="checkedArr.includes(item)" :class="{'checked':checkedArr.includes(item)}">
 </checkbox>

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>

 

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值