简单的下拉选择

<template>
    <div class="level-select">
        <div class="search-box">
            <Tag class="search-tag" @on-close="handleClose" closable v-for="(item, i) of selectList" :key="i">{{item.label}}</Tag>
            <Input class="search" v-model="keyword" @on-focus="focus" @on-change="search" placeholder="Enter something..." />
            <Icon type="ios-arrow-down" />
        </div>
        <ul v-if="isShowList">
            <li class="no-data" v-if="list.length === 0">
                暂无数据
            </li>
            <li v-for="(item, i) of list" :key="i">
                <div class="title">{{item.label}}</div>
                <ul>
                    <li v-for="(el,j) of item.children" :key="j">
                        <div v-if="el.children && el.children.length">
                            <div class="sub-title">{{el.label}}</div>
                            <ul>
                                <li v-for="(info,k) of el.children" :key="k">
                                    <div :class="['select-item sub-txt', info.value === active ? 'active' : '']" @click="selectHandler(info)">{{info.label}}</div>
                                </li>
                            </ul>
                        </div>
                        <div v-else>
                            <div :class="['select-item', el.value === active ? 'active' : '']" @click="selectHandler(el)">{{el.label}}</div>                            
                        </div>
                        
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                active: '',
                isShowList: false,
                keyword: '',
                selectList: [],
                list: [],
                list2: [
                    {
                        label: '一级分类名称',
                        value: '1',
                        children: [
                            {
                                label: '二级分类名称',
                                value: '2',
                                children: [
                                    {
                                        label: '上海',
                                        value: '100'
                                    },
                                    {
                                        label: '北京',
                                        value: '101'
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        label: '一级分类名称',
                        value: '1',
                        children: [
                            {
                                label: '华北',
                                value: '20',
                                
                            }
                        ]
                    }
                ]
            }
        },
        methods:{
            focus() {
                this.isShowList = true
            },
            queryData(query) {
                this.list = this.list2
            },
            search(val) {
                console.log(111,this.keyword)
                this.isShowList = true
                if (this.keyword) {
                    this.queryData()
                }
            },
            handleClose(){

            },
            selectHandler(item) {
                this.selectList = [item]
                this.isShowList = false
                this.active = item.value
                this.keyword = ''
                
            }
        }
    }
</script>
<style scoped>
    * {
        padding: 0;
        margin: 0;
    }
    ul, li {
        list-style: none;
    }
    .search {
        flex: 1;
    }
    .search >>> .ivu-input {
        border: none;
        outline: none;
    }
    .search-tag {
        margin-right: 10px;
    }
    .level-select {}
    .level-select .search-box {
        display: flex;
        align-items: center;
        border: 1px solid #ccc;
        height: 36px;
    }
    .title {
        color: #ccc;
    }
    .search-box > span {
        max-width: 80%;
    }
    .sub-title {
        color:#ccc;
        padding-left: 20px;
    }
    
    .select-item {
        padding-left: 20px;
    }
    .select-item:hover {
        background-color: #eee;
    }
    .select-item.active {
        color: #57a3f3;
    }
    .sub-txt {
        padding-left: 40px;
    }
    .no-data {
        text-align: center;
    }
</style>