lingfeng-admin/src/components/goods/goodsFreight.vue

<template>
    <div class="province">
        <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="province.checked"
            :disabled="province.disabled"
            @change="changeProvince"
            >{{ province.name }}
        </el-checkbox>
        <svg class="changeIcon" aria-hidden="true" @click.stop="openSingle">
            <use :xlink:href="iconChange"></use>
        </svg>
        <transition name="fade">
            <div
                class="singleArea"
                v-show="itemShow && province.cityList.length"
            >
                <svg
                    class="changeIcon"
                    aria-hidden="true"
                    @click.stop="closeSingle"
                >
                    <use xlink:href="#icon-close"></use>
                </svg>
                <el-checkbox-group v-model="province.city"  @change="handleCheckedCitiesChange">
                    <el-checkbox
                        v-for="(item, index) in province.cityList"
                        :key="index"
                        :label="item.code"
                        :disabled="item.disabled"
                        >{{ item.name }}
                    </el-checkbox>
                </el-checkbox-group>
            </div>
        </transition>
    </div>
</template>

<script>
    export default {
        name: 'goods-freight',
        props: {
            province: {
                type: Object
            },
            show: {
                type: Boolean
            },
            index: {
                type: Number
            }
        },
        data() {
            return {
                isIndeterminate: false,
                itemShow: false,
                iconChange: '#icon-arrowdropdown'
            };
        },
        created() {
        },
        methods: {
            openSingle() {
                this.iconChange = this.itemShow
                    ? '#icon-arrowdropdown'
                    : '#icon-arrowdropup';
                this.$emit('changeShow', this.index, !this.itemShow);
            },
            changeProvince(val) {
                // 根据省份的选择状态更改市级状态
                this.province.city = val ? this.province.cityList.map(item => item.code) : [];
                this.isIndeterminate = false;
                this.$emit('changeCity', this.index, this.province);
            },
            handleCheckedCitiesChange(value) {
                let checkedCount = value.length;
                this.province.checked = checkedCount === this.province.cityList.length;
                this.$emit('changeCity', this.index, this.province);
                this.isIndeterminate =
                    checkedCount > 0 && checkedCount < this.province.cityList.length;
            },
            closeSingle() {
                this.iconChange = '#icon-arrowdropdown';
                this.$emit('changeShow', this.index, false);
            }
        },
        watch: {
            show(val) {
                this.itemShow = val;
            }
        }
    };
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
    @import '~assets/main.styl';

    .province {
        position: relative;
        width: 106px;
        margin-bottom: 10px;
        line-height: 30px;
    }

    .fade-enter-active, .fade-leave-active {
        transition: opacity 0.3s;
    }

    .fade-enter, .fade-leave-to { /* .fade-leave-active below version 2.1.8 */
        opacity: 0;
    }

    .el-checkbox {
    }

    .el-checkbox-group {
        flex-x();
        flex-wrap: wrap;
    }

    .changeIcon {
        width: 12px;
        height: 12px;
        fill: #666;
        position: absolute;
        right: 10px;
        top: 10px;
        cursor: pointer;
    }

    .singleArea {
        background: #efefef;
        padding: 20px 10px;
        width: 250px;
        position: absolute;
        left: 0;
        top: 30px;
        z-index: 99;
    }
</style>