From 8c2417edcb1e64867e8ab0c6c40cf8b05029aabb Mon Sep 17 00:00:00 2001 From: whycq <whycq> Date: 星期五, 01 四月 2022 16:35:15 +0800 Subject: [PATCH] # --- pages/basics/demo.vue | 106 +++++++++++++++++++++++++++++++++++++++-------------- 1 files changed, 78 insertions(+), 28 deletions(-) diff --git a/pages/basics/demo.vue b/pages/basics/demo.vue index 5b51980..81c4b06 100644 --- a/pages/basics/demo.vue +++ b/pages/basics/demo.vue @@ -3,26 +3,34 @@ <scroll-view> <view class="demo-tab"> <checkbox-group @change="checkbox"> - <label v-for="(item,index) in data" :key="index" - @click="changeClass(index)" class="demo-list bg-false" :class="{'active':add_class==index}" > - - <view :class="'bg-'+item.checked" class="demo-list"> - <view class="demo-list-left"><checkbox :value="item.id+''" :checked="item.checked" /> - </view> - <view class="demo-list-right"> - <view><text style="width: 90rpx;">璁㈠崟 | </text>{{item.orderNo}}<text>搴忓彿锛歿{index+1}}</text></view> - <view><text >鍟嗗搧缂栫爜锛�</text>{{item.matnr}}</view> - <view ><text>搴斿叆鏁伴噺锛�</text><view class="text-num">{{item.anfme}}</view><text>鍟嗗搧鍚嶇О锛�</text>{{item.maktx}}</view> - <view><text>宸插叆鏁伴噺锛�</text><view class="text-num">{{item.inQty}}</view><text>璁㈠崟鐘舵�侊細</text>{{item.state$}}</view> - </view> - </view> + <label v-for="(item,index) in data" :key="index" class="demo-list bg-false" :class="'bg-'+item.checked" > + <view class="demo-list-left"> + <checkbox :value="item.id+''" :checked="item.checked" /> + </view> + <view class="demo-list-right"> + <view><text style="width: 90rpx;">璁㈠崟 | </text>{{item.orderNo}}<text>搴忓彿锛歿{index+1}} </text></view> + <view><text >鍟嗗搧缂栫爜锛�</text>{{item.matnr}}</view> + <view ><text>搴斿叆鏁伴噺锛�</text><view class="text-num">{{item.anfme}}</view><text>鍟嗗搧鍚嶇О锛�</text>{{item.maktx}}</view> + <view><text>宸插叆鏁伴噺锛�</text><view class="text-num">{{item.inQty}}</view><text>璁㈠崟鐘舵�侊細</text>{{item.state$}}</view> + </view> </label> </checkbox-group> </view> </scroll-view> <view class="foot flex justify-around"> - <button class="cu-btn bg-yellow lg">涓婃灦</button> - <button class="cu-btn bg-yellow lg">鎾ら攢涓婃灦</button> + <label> + <checkbox :checked="check" @click="allChecked()">{{checkText}}</checkbox> + </label> + <label> + <text @click="reChecked()">鍙嶉��</text> + </label> + <label for=""> + <button class="cu-btn bg-yellow lg" @click="shangjia()">涓婃灦</button> + </label> + <label for=""> + <button class="cu-btn bg-yellow lg">鎾ら攢涓婃灦</button> + </label> + </view> </view> </template> @@ -32,9 +40,9 @@ data() { return { data: [], - background:'unCheck', - color:'', - add_class:'' + check:false, + checkText:'鍏ㄩ��', + checkedData:[], } }, mounted() { @@ -54,7 +62,6 @@ } else { that.getData(); } - }, getData() { let that = this @@ -66,15 +73,11 @@ var res = res.data if (res.code === 200) { that.data = res.data.records - console.log(that.data) - // that.setCheck() - } } }) }, checkbox: function (e) { - var items = this.data, values = e.detail.value; for (var i = 0, lenI = items.length; i < lenI; ++i) { @@ -86,11 +89,58 @@ this.$set(item,'checked',false) } } - console.log(this.data) + if (values.length == items.length) { + this.check = true + this.checkText = "鍙栨秷鍏ㄩ��" + } else { + this.check = false + this.checkText = "鍏ㄩ��" + } }, - changeClass(index) { - console.log(index) - this.add_class=index + reChecked() { // 鍙嶉�� + var checkArr = [] + for (var i = 0; i < this.data.length;i++) { + if (this.data[i].checked == true) { + this.$set(this.data[i],'checked',false) + }else{ + this.$set(this.data[i],'checked',true) + } + if (this.data[i].checked == true) { + checkArr.push(this.data[i].checked) + } + } + if (checkArr.length == this.data.length) { + this.check = true + this.checkText = "鍙栨秷鍏ㄩ��" + } else { + this.check = false + this.checkText = "鍏ㄩ��" + } + }, + allChecked(e){ // 鍏ㄩ�� + if (this.check == true) { + for (var i = 0; i < this.data.length;i++) { + this.$set(this.data[i],'checked',false) + } + this.check = false + this.checkText = "鍏ㄩ��" + } else { + for (var i = 0; i < this.data.length;i++) { + this.$set(this.data[i],'checked',true) + } + this.check = true + this.checkText = "鍙栨秷鍏ㄩ��" + } + + }, + shangjia() { + this.checkedData = [] + for (var i = 0; i < this.data.length; i++) { + if (this.data[i].checked == true) { + this.checkedData.push(this.data[i]) + } + } + console.log(this.checkedData) } } } @@ -101,7 +151,7 @@ background-color: #FFFFFF; } .bg-true { - background-color: #e5e5e5; + background-color: #ebebeb; } .demo-tab { } -- Gitblit v1.9.1