uni-app 实现单选多选功能

效果图如下所示：

代码：
 

<template>
    <view class="page">
        <view class="single-list">
            <view class="checkall-list">
                <checkbox value="cb" :checked="checked" class="pichOn" @click="allcheckeds" />
                <text>全选</text>
            </view>
            <view v-for="(val, index) in personnelList" :key="val.id" class="list-box">
                <view class="person-left">
                    <checkbox value="cb" :checked="val.ischecked" class="pichOn" @click="all(val)" />
                    <text class="list-box1">{{ val.employeeName }}</text>
                    <text class="list-box1">{{ val.age }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            checked: false,
            personnelList: [
                {
                    employeeName: '刘昊然',
                    age: 22,
                    id: 1
                },
                {
                    employeeName: '白敬亭',
                    age: 23,
                    id: 2
                },
                {
                    employeeName: '肖战',
                    age: 24,
                    id: 3
                },
                {
                    employeeName: '王一博',
                    age: 25,
                    id: 4
                }
            ]
        };
    },

    methods: {
        // 单选
        all(val) {
            const index = this.personnelList.findIndex((item) => item.id === val.id);
            this.personnelList[index].ischecked = !this.personnelList[index].ischecked;
            // 更新全选状态
            this.checked = this.personnelList.every((item) => item.ischecked);
            // 获取所有已选中的元素组成的数组
            this.personnelList = this.personnelList.filter((item) => item.ischecked);
            console.log(this.personnelList)
        },
        allcheckeds() {
            this.checked = !this.checked;
            this.personnelList.forEach((v) => {
                v.ischecked = this.checked;
            });
            console.log(this.personnelList)
        }
    }
};
</script>

<style lang="scss" scoped>
.page {
    height: 100%;
    padding-bottom: 60rpx;
}
.single-list {
    margin: 10rpx;
    background-color: #fff;
    border-radius: 0.3125rem;
    .list-box {
        height: 120rpx;
        display: flex;
        align-items: center;
        border-bottom: 1rpx solid #efefef;
        .person-left {
            width: 70%;
            display: flex;
        }
        text {
            font-size: 28rpx;
            padding-right: 5rpx;
        }
        .list-box1 {
            max-width: 50%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}
.checkall-list {
    height: 120rpx;
    display: flex;
    align-items: center;
    border-bottom: 1rpx solid #efefef;
}
.pichOn {
    color: '#4e6ef2';
    transform: scale(0.9);
    padding: 0rpx 20rpx;
}
</style>
——————————————————————————完结———————————————