具体效果图如下:
官方给出的https://uniapp.dcloud.io/component/checkbox是不能直接实现全选,反选,功能的。需要在逻辑中进行转化。
下面我们一起来看看实现的过程:
首先声明一下,顶部的搜索框及新增按钮是封装在一个公共组件里边,如果需要复制代码,可以忽略此部分。
数据定义部分:
data() {
return {
all:'aa',
isAllSelected: true, // 是否全部被选中
checkedList :[], // 默认选中的值
// 有复选框的列表数据
workList:[
{
title: "指纹登录", // 工作项名称
projectName: "uniapp开发", // 项目名称
ownerName: "张三", // 工作项执行人
startTimePlan: '2020-09-10', // 计划启动时间
endTimePlan: '2020-09-11', // 计划完成时间
id: "1"
},
{
title: "扫码登录", // 工作项名称
projectName: "uniapp开发", // 项目名称
ownerName: "李四", // 工作项执行人
startTimePlan: '2020-09-10', // 计划启动时间
endTimePlan: '2020-09-11', // 计划完成时间
id: "2"
},
{
title: "人脸识别登录", // 工作项名称
projectName: "uniapp开发", // 项目名称
ownerName: "张三", // 工作项执行人
startTimePlan: '2020-09-10', // 计划启动时间
endTimePlan: '2020-09-11', // 计划完成时间
id: "3"
},
{
title: "邮箱登录", // 工作项名称
projectName: "uniapp开发", // 项目名称
ownerName: "张三", // 工作项执行人
startTimePlan: '2020-09-10', // 计划启动时间
endTimePlan: '2020-09-11', // 计划完成时间
id: "4"
},
],
}
},
结构部分分为列表部分,及全选按钮部分,代码分布如下截图:
逻辑部分:
第一步:监听是全选按钮绑定的值,是否全选
第二步: 监听选中数组
第4步:全选复选框的checkbox-group changge事件
第5步:复选框组合的checkbox-group changge事件
本文全部代码如下:(样式部分不提供)
<template>
<view class="uni-workList biz-box">
<!-- 搜索框 -->
<view class="searchBox" style="display: flex;justify-content: space-between;">
<uniSearch
placeholder="输入工作项执行人或项目名称"
radius="100"
clearButton="auto"
style="width: 80%;">
</uniSearch>
<!-- 占位符 -->
<button type="primary" class="addKpi" >新增</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">
<!-- 标题 -->
<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" @click="linkWorkList(item)">
<text>查看详情</text>
<text class="iconfont icon-arrow-right"></text>
</view>
</view>
<!-- 内容 -->
<view class="list-box-content">
<view class="content-row">
<text class="iconfont icon-xiangmu"></text>
<text class="content-row-font">项目名称:{{ item.projectName }}</text>
</view>
<view class="content-row">
<text class="iconfont icon-shijian"></text>
<text class="content-row-font content-row-font-time">计划起止时间:{{ item.startTimePlan }} —— {{ item.endTimePlan }}</text>
</view>
</view>
<!-- 执行人 -->
<view class="content-last-row">
<text class="iconfont icon-person"></text>
<text class="row-font">工作项执行人:{{ item.ownerName }}</text>
</view>
</view>
<view class="loading">{{loadingText}}</view>
</checkbox-group>
</scroll-view>
<!-- 列表部分 -->
<!-- 按钮操作 -->
<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>全选</view>
</label>
<button class="right-btn" type="primary">确定</button>
</view>
</view>
</template>
<script>
import uniSearch from '@/components/uni-search.vue'
export default {
components:{
uniSearch
},
data() {
return {
userId:'',
searchValue:'',
all:'aa',
timer:null,
pullText:'', // 下拉
loadingText:'', // 上拉时加载数据的提示语
isAllSelected: true, // 是否全部被选中
checkedList :[], // 默认选中的值
// 有复选框的列表数据
workList:[
{
title: "指纹登录", // 工作项名称
projectName: "uniapp开发", // 项目名称
ownerName: "张三", // 工作项执行人
startTimePlan: '2020-09-10', // 计划启动时间
endTimePlan: '2020-09-11', // 计划完成时间
id: "1"
},
{
title: "扫码登录", // 工作项名称
projectName: "uniapp开发", // 项目名称
ownerName: "李四", // 工作项执行人
startTimePlan: '2020-09-10', // 计划启动时间
endTimePlan: '2020-09-11', // 计划完成时间
id: "2"
},
{
title: "人脸识别登录", // 工作项名称
projectName: "uniapp开发", // 项目名称
ownerName: "张三", // 工作项执行人
startTimePlan: '2020-09-10', // 计划启动时间
endTimePlan: '2020-09-11', // 计划完成时间
id: "3"
},
{
title: "邮箱登录", // 工作项名称
projectName: "uniapp开发", // 项目名称
ownerName: "张三", // 工作项执行人
startTimePlan: '2020-09-10', // 计划启动时间
endTimePlan: '2020-09-11', // 计划完成时间
id: "4"
},
],
}
},
onReady(){
},
created: function () {
},
mounted: function () {
},
watch:{
// 是否全选
isAllSelected:{
handler(n){
console.log(this.workList)
// 如果全选
if(n){
// this.checkedList = this.workList.filter((item, index) => item.id);
// 有复选框的数据列表进行遍历,设置checked为选中
this.workList.forEach((item, index) => {
this.$set(item,'checked',true)
console.log(item)
})
}else{
/** 否则需要做判断
* 情景1:当选中的数组长度为0时,对有复选框的数据列表进行遍历,设置checked为false
* 情景2:当选中的数组长度 === 有复选框的数组列表 时,对有复选框的数据列表进行遍历,
* 设置checked为false
* */
console.log(this.checkedList,'选中的值')
// 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
},
// 选中数组的监听
checkedList:{
handler(n,o){
let that = this;
console.log(n,'选中的值监听')
console.log(o,'原来的值')
if(n){
if(n.length == this.workList.length ){
// 当选中的数组长度 === 有复选框的数组长度,设置全部选中字段isAllSelected为true
this.isAllSelected = true
}else{
// 否则为false,都不选中
this.isAllSelected = false
}
}
},
deep: true,
immediate: true
}
},
methods:{
/** 全选复选框的checkbox-group changge事件 */
checkboxAllChange: function (e){
console.log(e,'e.detail.value')
// 当有值被选中的时候,此时应为全选状态
// debugger
if(e.detail.value.length>0){
// 设置全选字段isAllSelected为true,且选中数组为默认值
this.isAllSelected = true;
}else{
// 否则全选状态为false
this.isAllSelected = false;
}
},
/** 复选框组合的checkbox-group changge事件*/
checkboxChange: function (e) {
var workList = this.workList, // 有复选框的数组集合
values = e.detail.value; // 选中的数组集合
this.checkedList = values; // 选中的数组集合
console.log(e)
console.log(this.checkedList,'this.checkedList')
console.log(e.detail.value,'e.detail.value')
// 对有复选框的数组集合进行遍历
for (var i = 0, lenI = workList.length; i < lenI; ++i) {
const item = workList[i]
// 如果当前选中的数组包含复选框数组中的某个元素,则设置为选中状态
if(values.includes(item.id)){
this.$set(item,'checked',true)
}else{
// 否则设置为补选中状态
this.$set(item,'checked',false)
}
}
},
}
}
</script>
<style lang="scss">
.addKpi{
font-size:24upx;
height: 56upx;
line-height: 56upx;
margin:0;
}
</style>