qimall/backend/modules/mall/views/goods/component/com-specs-select.php

<template id="com-specs-select">
    <div class="specs-select">
        <span class="el-dropdown-link" @click="showSelect">
            选择已有规格<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-collapse-transition>
            <ul class="down-select" v-if="downSelectShow">
                <li class="el-dropdown-menu__item" v-for="item in specsList" @click="useSpecs(item, group)">{{ item.name }}</li>
                <li class="el-dropdown-menu__item el-dropdown-menu__item--divided" :class="loadMoreLoding ? 'is-disabled' : ''" @click="loadMore">
                    <span>加载更多</span>
                </li>
            </ul>
        </el-collapse-transition>
    </div>
</template>
<script>

Vue.component('com-specs-select', {
    template: '#com-specs-select',
    props: {
        specsList: {
            type: Array,
            default: () => {
                return []
            }
        },
        index: Number,
        group: Object,
        loadMoreLoding: Boolean,
    },
    data() {
        return {
            downSelectShow: false,
        }
    },
    watch: {
        specsList(item1, item2) {
            if (this.group && this.group.attr_group_name) {
                let name = this.group.attr_group_name
                let item = this.specsList.find(function(obj) {
                    return obj.name == name
                })
                if (item) {
                    this.useSpecs(item)
                    this.showSelect()
                }
            }
        },
    },
    methods: {
        getSpecs() {
            request({
                params: {
                    r: 'mall/specs/index',
                    page: this.specsPage,
                    limit: this.specsLimit
                },
                method: 'get',
            }).then(e => {
                if (e.data.code === 0) {
                    this.specsList = [
                        ...this.specsList,
                        ...e.data.data.list
                    ]
                    this.pageCount = e.data.data.page_count
                    this.loadMoreLoding = false
                }
            })
        },
        showSelect() {
            this.downSelectShow = !this.downSelectShow
        },
        /**
         * 加载更多
         */
        loadMore() {
            this.$emit('load-more')
        },
        /**
         * 使用规格
         */
        useSpecs(item) {
            this.showSelect()
            this.$emit('use-specs', item, this.group, this.index)
        },
    }
})
</script>
<style>
    .specs-select {
        margin-right: 16px;
    }

    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
    
    .down-select {
        position: absolute;
        /* top: 0; */
        /* left: 0; */
        z-index: 10;
        padding: 10px 0;
        margin: 5px 0;
        background-color: #fff;
        border: 1px solid #ebeef5;
        border-radius: 4px;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    }
</style>