解决方案: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>