全选反选

最新推荐文章于 2024-01-04 11:20:21 发布

左森

最新推荐文章于 2024-01-04 11:20:21 发布

阅读量107

点赞数

文章标签：全选反选

本文链接：https://blog.csdn.net/qq719756146/article/details/85781154

版权

vue功能专栏收录该内容

22 篇文章 0 订阅

订阅专栏

ps: 数据在数据分类里面

<mt-popup v-model="set" position="bottom" style="width:100%">
            <div class="setClass">
                <h3>设置负责区域</h3>
                <div class="scroller">
                    <scroller>
                        <div v-for="(item,$index) in rank1" :key="item" class="list">
                            <p>
                                <span @click="changeRank1($index)"><i class="mintui mintui-success" v-show="item.isPitchOn"></i></span>
                                <span>{{item.name}}</span>
                            </p>
                            <ul>
                                <li @click="changeLi()" v-for="(item2,$index2) in item.rank2" :key="$index2">
                                    <span @click="changeRank2($index,$index2)"><i class="mint-toast-icon mintui mintui-success" v-show="item2.isPitchOn"></i></span>
                                    <span>{{item2.name}}</span>
                                </li>
                            </ul>
                        </div>
                    </scroller>
                </div>
            </div>
        </mt-popup>

.setClass {
            padding: 15px 0;
            min-height: 400px;
            h3 {
                font-weight: normal;
                text-align: center;
                height: 40px;
                border-bottom: 1PX solid #ddd;
            }
            .scroller {
                position: relative;
                height: 360px;
                margin: 5px 15px 0;
                .list {
                    border-bottom: 1PX solid #eee;
                    padding-top: 15px;
                }
                p {
                    display: flex;
                    align-items: center;
                    span {
                        &:first-child {
                            border: 1PX solid #ddd;
                            align-items: center;
                            display: flex;
                            justify-content: center;
                            width: 25px;
                            height: 25px;
                            margin-right: 15px;
                            color: red;
                            i {
                                font-size: 14px;
                            }
                        }
                    }
                }
                ul {
                    display: flex;
                    flex-wrap: wrap;
                    padding: 15px;
                    li {
                        width: 50%;
                        display: flex;
                        align-items: center;
                        padding-bottom: 10px;
                        span {
                            font-size: 16px;
                            &:first-child {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                width: 20px;
                                height: 20px;
                                border: 1PX solid #ddd;
                                margin-right: 8px;
                                i {
                                    font-size: 12px;
                                    color: #f40;
                                }
                            }
                        }
                    }
                }
            }
        }

			// 改变第一级别时
            changeRank1(id) {
                this.rank1[id].isPitchOn = !this.rank1[id].isPitchOn
                for (let i = 0; i < this.rank1[id].rank2.length; i++) {
                    const element = this.rank1[id].rank2[i];
                    if (this.rank1[id].isPitchOn) {
                        element.isPitchOn = true;
                    } else {
                        element.isPitchOn = false;
                    }
                }
            },
            // 改变第二级别时
            changeRank2(id1, id2) {
                this.rank1[id1].rank2[id2].isPitchOn = !this.rank1[id1].rank2[id2].isPitchOn;
                let isrand = this.rank1[id1].rank2.every( item => item.isPitchOn === true);
                this.rank1[id1].isPitchOn = isrand
            },