<template>
<view>
<view class="uni-list">
<checkbox-group v-model="checkList" @change="checkboxChange">
<label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
<view>
<checkbox :value="item.value" :checked="item.checked" />
</view>
<view>{<!-- -->{item.name}}</view>
</label>
</checkbox-group>
\t\t\t
<u-button @click="sasa">click me</u-button>
</view>
</view>
</template>
<script>
export default {<!-- -->
data() {<!-- -->
return {<!-- -->
title: 'checkbox check box',
ids: [],
checkList: [],
items: [{<!-- -->
value: 'USA',
name: 'United States'
},
{<!-- -->
value: 'CHN',
name: 'China',
checked: 'true'
},
{<!-- -->
value: 'BRA',
name: 'Brazil'
},
{<!-- -->
value: 'JPN',
name: 'Japan'
},
{<!-- -->
value: 'ENG',
name: 'United Kingdom'
},
{<!-- -->
value: 'FRA',
name: 'France'
}
]
}
},
methods: {<!-- -->
checkboxChange: function (e) {<!-- -->
var items = this. items,
values = e.detail.value;
for (var i = 0, lenI = items. length; i < lenI; + + i) {<!-- -->
const item = items[i]
if(values.includes(item.value)){<!-- -->
this.$set(item,'checked',true)
}else{<!-- -->
this.$set(item,'checked',false)
}
}
},
sasa(){<!-- -->
let dsadsa = this.items.filter(res=>res.checked==true).map(li=>li.value)
console.log(dsadsa)
}
}
}
</script>
<style>
.uni-list-cell {<!-- -->
justify-content: flex-start
}
</style>
<template>
<view class="uni-workList biz-box">
<!-- search box -->
<view class="searchBox" style="display: flex;justify-content: space-between;">
<!-- placeholder -->
<button type="primary" class="addKpi">Add</button>
</view>
<scroll-view class="uni-scoller-box" enableBackToTop="true" scroll-y>
<checkbox-group v-model="checkedList" class="" @change="checkboxChange">
<view v-if="pullText !=''" class="loading">{<!-- -->{pullText}}</view>
<view class="list-box" v-for="(item,index) in workList" :key="index">
<!-- Title -->
<view class="list-box-title">
<label class="titleName"
style=" width: 65%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
<checkbox v-model="item.id" :value="item.id" :checked="item.checked" />
<text>{<!-- -->{ item.title }}</text>
</label>
<view class="link-detail">
<text>View details</text>
<text class="iconfont icon-arrow-right"></text>
</view>
</view>
<!-- content -->
<view class="list-box-content">
<view class="content-row">
<text class="iconfont icon-xiangmu"></text>
<text class="content-row-font">Project Name: {<!-- -->{ item.projectName }}</text>
</view>
<view class="content-row">
<text class="iconfont icon-shijian"></text>
<text class="content-row-font content-row-font-time">Plan start and end time: {<!-- -->{ item.startTimePlan }} --
{<!-- -->{ item.endTimePlan }}</text>
</view>
</view>
<!-- Executor -->
<view class="content-last-row">
<text class="iconfont icon-person"></text>
<text class="row-font">Work item executor: {<!-- -->{ item.ownerName }}</text>
</view>
</view>
<view class="loading">{<!-- -->{loadingText}}</view>
</checkbox-group>
</scroll-view>
<!-- list section -->
<!-- button operation -->
<view class="workList-buttons">
<label class="all-check-box left-btn">
<view>
<checkbox-group @change="checkboxAllChange">
<checkbox :value="all" :checked="isAllSelected" />
</checkbox-group>
</view>
<view>Select All</view>
</label>
<button class="right-btn" type="primary">OK</button>
</view>
</view>
</template>
<script>
export default {<!-- -->
data() {<!-- -->
return {<!-- -->
userId: '',
searchValue: '',
all: 'aa',
timer: null,
pullText: '', // pull down
loadingText: '', // prompt for loading data when pulling up
isAllSelected: true, // Whether all are selected
checkedList: [], // default checked value
// list data with checkboxes
workList: [{<!-- -->
title: "Fingerprint Login", // work item name
projectName: "uniapp development", // project name
ownerName: "Zhang San", // work item executor
startTimePlan: '2020-09-10', // Planned start time
endTimePlan: '2020-09-11', // Plan completion time
id: "1"
},
{<!-- -->
title: "Scan code to log in", // work item name
projectName: "uniapp development", // project name
ownerName: "Li Si", // work item executor
startTimePlan: '2020-09-10', // Planned start time
endTimePlan: '2020-09-11', // Plan completion time
id: "2"
},
{<!-- -->
title: "Face recognition login", // work item name
projectName: "uniapp development", // project name
ownerName: "Zhang San", // work item executor
startTimePlan: '2020-09-10', // Planned start time
endTimePlan: '2020-09-11', // Plan completion time
id: "3"
},
{<!-- -->
title: "Email Login", // work item name
projectName: "uniapp development", // project name
ownerName: "Zhang San", // work item executor
startTimePlan: '2020-09-10', // Planned start time
endTimePlan: '2020-09-11', // Plan completion time
id: "4"
},
],
}
},
onReady() {<!-- -->
},
created: function() {<!-- -->
},
mounted: function() {<!-- -->
},
watch: {<!-- -->
// Whether to select all
isAllSelected: {<!-- -->
handler(n) {<!-- -->
console.log(this.workList)
// if select all
if (n) {<!-- -->
// this.checkedList = this.workList.filter((item, index) => item.id);
// Traverse the data list with check boxes, set checked to selected
this.workList.forEach((item, index) => {<!-- -->
this.$set(item, 'checked', true)
console. log(item)
})
} else {<!-- -->
/** Otherwise, judgment is required
* Scenario 1: When the length of the selected array is 0, traverse the data list with check boxes, and set checked to false
* Scenario 2: When the length of the selected array === the array list with check boxes, traverse the data list with check boxes,
* Set checked to false
* */
console.log(this.checkedList, 'checked value')
// debugger
console.log(this.workList, 'dff')
if (this.checkedList.length == 0 || this.checkedList.length == this.workList.length) {<!-- -->
this.workList.forEach((item, index) => {<!-- -->
this.$set(item, 'checked', false)
})
}
}
console.log(this.workList, 'qua')
},
deep: true,
immediate: true
},
// Select the listener for the array
checkedList: {<!-- -->
handler(n, o) {<!-- -->
console.log(n, 'selected value monitoring')
console.log(o, 'Original value')
if (n) {<!-- -->
if (n. length == this. workList. length) {<!-- -->
// When the length of the selected array === the length of the array with check boxes, set the all selected field isAllSelected to true
this.isAllSelected = true
} else {<!-- -->
// otherwise false, none selected
this.isAllSelected = false
}
}
},
deep: true,
immediate: true
}
},
methods: {<!-- -->
/** Checkbox-group change event for all checkboxes */
checkboxAllChange: function(e) {<!-- -->
console.log(e, 'e.detail.value')
// When a value is selected, it should be all selected at this time
// debugger
if (e.detail.value.length > 0) {<!-- -->
// Set the all-selected field isAllSelected to true, and the selected array is the default value
this.isAllSelected = true;
} else {<!-- -->
// otherwise select all state is false
this.isAllSelected = false;
}
},
/** checkbox-group change event for the combination of checkboxes*/
checkboxChange: function(e) {<!-- -->
var workList = this.workList, // array collection with checkboxes
values = e.detail.value; // selected array collection
this.checkedList = values; // checked array collection
console. log(e)
console.log(this.checkedList, 'this.checkedList')
console.log(e.detail.value, 'e.detail.value')
// Traverse the array collection with checkboxes
for (var i = 0, lenI = workList. length; i < lenI; + + i) {<!-- -->
const item = workList[i]
// If the currently selected array contains an element in the check box array, set it to the selected state
if (values.includes(item.id)) {<!-- -->
this.$set(item, 'checked', true)
} else {<!-- -->
// otherwise set to by-selected state
this.$set(item, 'checked', false)
}
}
},
}
}
</script>
<style lang="scss">
.addKpi {<!-- -->
font-size: 24upx;
height: 56upx;
line-height: 56upx;
margin: 0;
}
</style>