js多级嵌套选中效果代码实现-vue

 
<script lang="ts">
import { defineComponent, ref } from 'vue';
import CommonUtils from '@utils/common-utils';
 
export default defineComponent({
    setup() {
        const infoArr = ref([
            {
                id: 1,
                checked: true,
                drug: [
                    { id: 1.1, drugDetail: [{ checked: true }, { checked: false }] },
                    { id: 1.2, drugDetail: [{ checked: false }, { checked: false }] },
                ],
            },
            {
                id: 2,
                checked: false,
                drug: [
                    { id: 2.1, drugDetail: [{ checked: false }, { checked: false }] },
                    { id: 2.2, drugDetail: [{ checked: true }, { checked: false }] },
                ],
            },
        ]);
        const checkedDrug = (index: number, pharmacy: boolean, littleIndex?: number, indexValue?: number) => {
            if (pharmacy) {
                for (let i = 0; i < infoArr.value.length; i++) {
                    if (i === index) {
                        infoArr.value[i].checked = !infoArr.value[i].checked;
                    } else {
                        infoArr.value[i].checked = false;
                    }
                }
            } else {
                for (let i = 0; i < infoArr.value.length; i++) {
                    if (i === index) {
                        for (let s = 0; s < infoArr.value[i].drug.length; s++) {
                            if (s === littleIndex) {
                                for (let x = 0; x < infoArr.value[i].drug[s].drugDetail.length; x++) {
                                    if (x === indexValue) {
                                        infoArr.value[i].drug[s].drugDetail[x].checked = !infoArr.value[i].drug[s].drugDetail[x].checked;
                                    } else {
                                        infoArr.value[i].drug[s].drugDetail[x].checked = false;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        };
        return { getImage: CommonUtils.getImageSrc, infoArr, checkedDrug };
    },
});
script>
 
<style lang="scss" scoped>
.box-unfold {
    background: linear-gradient(332deg, #8796ff 0%, #93b1ff 100%);
    border-radius: 8px 8px 0px 0px;
    opacity: 1;
    padding: 2rem;
    padding-bottom: 1rem;
}
.drug-name {
    width: 100%;
    line-height: 3rem;
    & span:first-child {
        float: left;
        font-size: 17px;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #ffffff;
        background: url('../../assets/images/medication/checked_no.png') left center no-repeat;
        background-size: 2.4rem;
        padding-left: 3rem;
    }
 
    & span:last-child {
        float: right;
        font-size: 15px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #f2f3f5;
        padding: 1rem 1.5rem;
        text-align: center;
        line-height: 2rem;
        opacity: 1;
        border: 1px solid #f2f3f5;
        border-radius: 2.8rem;
    }
}
.number-show {
    width: 100%;
    line-height: 3rem;
    font-size: 14px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    span {
        font-size: 17px;
        font-weight: bold;
    }
}
.its-address {
    margin-top: 1rem;
    font-size: 14px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    width: 100%;
    line-height: 2rem;
}
.drug-info-loop {
    line-height: 2.5rem;
    padding: 1rem 2rem;
}
.name-part {
    font-size: 15px;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #7891ec;
}
.data-export {
    margin-top: 1rem;
    font-size: 14px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left-img {
        width: 20px;
        height: 20px;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .right-text {
        width: 90%;
    }
    p:first-child {
        color: #333333;
    }
    p:last-of-type {
        color: #666666;
    }
}
.over-checked {
    background: linear-gradient(180deg, #dde4ff 0%, #ffffff 72%) !important;
    .drug-name {
        & span:first-child {
            color: #2b2b2b;
            background: url('../../assets/images/medication/checked_over.png') left center no-repeat;
            background-size: 2.4rem;
            padding-left: 3rem;
        }
 
        & span:last-child {
            background: linear-gradient(332deg, #8796ff 0%, #93b1ff 100%);
            color: #fff;
        }
    }
    .number-show {
        color: #333;
        span {
            color: #ff8c3f;
        }
    }
    .its-address {
        color: #333;
    }
}
style>