uniapp+uView多选框限制筛选个数

<template>

    <view class="page">

        <view class="sx-txt mr30" @click="filterEcharts">筛选</view>

        <!-- 点击筛选按钮弹出筛选框 -->

        <u-popup :show="filterShow" mode="top" background-color="#fff" :is-mask-click="false" class="filterPopup">

            <view>

                <!-- 合约筛选组件 -->

                <view class="cateInput" :class="showList == true ? 'active' : ''">

                    合约

                    <u-icon :name="showList ? 'arrow-up-fill' : 'arrow-down-fill'" size="12"

                        :color="showList ? '#ffffff' : '#999999'" class="rightIcon"></u-icon>

                </view>

                <view class="indicatorText">

                    <text style="margin-right: 10rpx;">*</text>可同时选择2项

                </view>

                <scroll-view scroll-y="true" class="cateCheckbox">

                    <u-checkbox-group

                        v-model="categroies"

                        placement="column"

                        @change="checkboxChange"

                        size="15"

                        name="2"

                    >

                        <u-checkbox

                            v-for="(item, index) in categoryOptions"

                            :key="index"

                            :label="item.name"

                            :name="item.name"

                            activeColor="#3B49AE"

                            labelSize="14"

                            :disabled="item.checked"

                                >

                        </u-checkbox>

                    </u-checkbox-group>

                </scroll-view>

            </view>

            <view class="btnOptions">

                <u-button text="取消" class="cancelBtn" @click="filterClose"></u-button>

                <u-button type="primary" text="确定" class="creatBtn" @click="creatChartList"></u-button>

            </view>

        </u-popup>

    </view>

</template>

<script>

    export default {

        data() {

            return {

                filterShow: false, // 是否显示筛选框

                showList: false, // 是否显示下拉数据

                categoryOptions: [], // 合约数据

                categroies: [], // 合约筛选值

            }

        },

        onLoad(option) {

           

        },

        created() {

           

        },

        mounted() {

            this.getCategroyList()

        },

        methods: {

            // 获取合约列表

             getCategroyList() {

                let res1 = [

                    '黄金','铁','镍','豆子'

                ]

                this.categroies = res1.slice(0, 2)

                res1.forEach(item => {

                    let obj = {

                        name: item,

                        checked: false

                    }

                    this.categoryOptions.push(obj)

                })

                if (this.categroies.length == 2) {

                    for (let i in this.categoryOptions) { // 循环全部数据

                        if (this.categroies.includes(this.categoryOptions[i].name)) {

                          this.categoryOptions[i].checked = false;

                        } else {

                            this.categoryOptions[i].checked = true;

                        }

                    }

                }

            },

            // 多选框点击事件

            checkboxChange(n) {

                //设置勾选

                this.categroies = []

                this.categroies = n

                let valueList = this.categoryOptions.map(item => item.name); //将数据中的name取出  也就是e.detail.value中的值

                        let arr = [] // 声明一个数组 存放 未被选中的

                        valueList.forEach(item => {

                          if (!this.categroies.includes(item)) { // 将未被选中的添加到arr数组中

                            arr.push(item)

                          }

                        })

                        if (this.categroies.length == 2) { // 如果已选中的长度 == 限制的值

                          for (let i in this.categoryOptions) { // 循环全部数据

                            for (let j in arr) { // 循环未被选中的数据

                              if (this.categoryOptions[i].name === arr[j]) {

                                this.categoryOptions[i].checked = true;

                              }

                            }

                          }

                        }else{

                          for(let i in this.categoryOptions){

                            this.categoryOptions[i].checked = false;

                          }

                        }

            },

            // 点击筛选

            filterEcharts() {

                this.filterShow = true

                this.showBackIcon = false

                this.showList = true

            },

            // 筛选弹框关闭

            filterClose() {

                this.filterShow = false

                this.showBackIcon = true

            },

            // 点击确定筛选数据图表

            creatChartList() {

                if (this.categroies.length == 2) {

                    this.filterShow = false

                } else {

                    uni.$u.toast('必须选择2个合约代码')

                    this.showList = true

                    this.filterShow = true

                }

            }

        }

    }

</script>

<style lang="scss" scoped>

    .page {

        width: 100%;

        height: 100%;

        overflow: hidden;

        background: #F1F2F4;

            .sx-txt {

                font-size: 32rpx;

                font-family: PingFang SC;

                font-weight: 500;

                color: #333333;

            }

    }

    .filterPopup {

        width: 100%;

        .cateInput {

            background-color: #F1F2F4;

            margin: 44rpx 5%;

            height: 70rpx;

            color: #999999;

            font-size: 28rpx;

            padding: 0rpx 30rpx;

            display: flex;

            align-items: center;

            position: relative;

            border-radius: 10rpx;

       

            .rightIcon {

                position: absolute;

                top: 20rpx;

                right: 20rpx;

            }

       

            &.active {

                background-color: #3849B4;

                color: #fff;

            }

        }

        .cateCheckbox {

            margin: 0 5% 34rpx;

            height: 300rpx;

            overflow-y: scroll;

        }

        .btnOptions {

            display: flex;

   

            .cancelBtn {

                border-radius: 0;

                background-color: #F1F2F4;

                color: #666666;

                border: none;

            }

   

            .creatBtn {

                border-radius: 0;

                background-color: #3849B4;

                border: none;

            }

        }

   

        .indicatorText {

            font-size: 22rpx;

            font-family: PingFang SC;

            font-weight: 500;

            color: #C0C0C0;

            margin-left: 5%;

            margin-bottom: 38rpx;

        }

        .indicatorCheckbox {

            margin: 0 5% 34rpx;

            height: 300rpx;

            overflow-y: scroll;

        }

    }

   

    /deep/ .u-checkbox {

        margin-bottom: 46rpx !important;

    }

</style>