demo from 群 0730

<template>
    <div class="wrap">
        <template v-if="ready">
            <div class="filter">
                <select v-model="selected">
                    <option v-for="op in types" :value="op.id" :key="op.id">{{ op.option }}</option>
                </select>
                <button @click="handleSearch">查询</button>
            </div>
            <Modules :data="modulesData" :loading="modulesLoading" />
        </template>
        <template v-else>
            <p>加载中...</p>
        </template>
    </div>
</template>

<script>

const mock = api => {

    return new Promise((reslove) => {

        const callback = data => {
            setTimeout(() => {
                reslove.apply(this, [data])
            }, 1200);
        }

        switch (api) {
            case '/types':
                callback([
                    {
                        id: 100,
                        option: '北京'
                    },
                    {
                        id: 200,
                        option: '天津'
                    },
                ])
                break;
            case '/modules':
                callback(
                    Array(
                        Math.ceil(
                            10 * Math.random()
                        )
                    ).fill(null).map(
                        (d, i) => Math.random()
                    )
                )
            default:
                break;
        }
    })

}

const Modules = {
    props: ['data', 'loading'],
    render() {
        const { data, loading } = this.$props;
        if (loading) {
            return (
                <div class="loading">加载中...</div>
            )
        }

        if (data && data.length > 0) {
            return (
                <div class="modules">
                {
                    data.map(
                        d => <p>data - { d }</p>
                    )
                }
                </div>
            )
        }
        else {
            return (
                <div class="no-data">暂无数据</div>
            )
        }
    }
}

export default {
    data: () => ({
        ready: false,
        types: [],
        selected: -1,
        modulesLoading: false,
        modulesData: []
    }),
    components: {
        Modules
    },
    methods: {
        init() {

            mock('/types').then(
                data => {
                    this.types = data;
                    if (data.length > 0) {
                        this.selected = data[0].id;
                        this.getModules();
                    }
                    this.ready = true;
                }
            )
        },
        getModules() {
            this.modulesLoading = true;
            mock(
                '/modules'
            ).then(
                data => {
                    this.modulesData = data;
                }
            ).finally(() => {
                this.modulesLoading = false;
            })
        },
        handleSearch(id) {
            this.getModules();
        },
    },
    mounted() {
        this.init()
    },
}
</script>