<style>
    .multilevel{position: relative; font-family: 'microsoft yahei'; font-size:14px; color: #585858}
    .multilevel a,.multilevel span{cursor: pointer; text-decoration: none; color:#585858}

    .picker-data{display: inline-block; width: 250px; height: 34px; border: 1px solid #ccd0d4; padding:6px 12px; position: relative; border-radius: 3px}
    .placeholder{display: block}
    .select-item a:hover{background: #CCCCCC}
    .select-item i{margin: 0 2px}
    .arrow{position: absolute; top: 50%; right: 8px; width: 10px; margin-top: -3px; height: 5px; background: url(./drop-arrow.png) -10px -25px no-repeat}

    .picker-dropdown{position: absolute; top: 34px; left: 1px;}
    .select-wrap{box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); border-radius: 4px; width: 300px}

    .select-tab{background: #f0f0f0; border-bottom: 1px solid #ccc;}
    .select-tab a{display: inline-block; padding: 8px 15px; border-left: 1px solid #ccc; border-bottom: 1px solid transparent; margin-bottom: -1px}
    .select-tab a:first-child {  border-left: none}
    .select-tab a.active{background: #FFFFFF; border-bottom: 1px solid #FFFFFF;}

    .select-content{background: #FFFFFF;}
    .levelContent{clear: both; list-style: none; margin: 0; padding: 10px;}
    .levelContent li{display: inline-block; padding: 5px 10px;}
</style>

<template>
    <div class="multilevel">
        <span class="picker-data">
            <span v-show="dataList.length==0" class="placeholder" @click="showDropdown">请选择类目</span>
            <span v-show="dataList.length>0" class="data">
                <span class="select-item" v-for="data in dataList">
                    <i v-if="$index>0">/</i>
                    <a href="javascript:" @click="selectTab($index)">{{data}}</a>
                </span>
            </span>
            <div class="arrow"></div>
        </span>

        <div class="picker-dropdown" v-show="isShowDropdown">
            <div class="select-wrap">
                <div class="select-tab">
                    <a v-for="tab in levelContent" class="level {{$index==activeTab?'active':''}}" @click="selectTab($index)">{{tab.name}}</a>
                </div>
                <div class="select-content">
                    <ul v-for="content in levelContent" class="levelContent" v-show="activeTab==$index">
                        <li v-for="item in content.list"><a href="javascript:" @click="selectItem(item)">{{item}}</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                levelContent:[
                    {name:"一级目录", list:["a1","a2","a3"]},
                    {name:"二级目录", list:["b1","b2","b3"]},
                    {name:"三级目录", list:["c1","c2","c3"]}
                ],
                isShowDropdown:false,
                activeTab:0,
                maxTab:2,
                dataList:[]
            }
        },
        computed:{
            dataArray(){
                console.log(this.dataList);
                return this.dataList.join('/');
            }
        },
        methods: {
            showDropdown(){
                if(this.isShowDropdown){
                    this.isShowDropdown = false;
                }else{
                    this.isShowDropdown = true;
                }
            },

            selectTab(index){
                this.isShowDropdown = true;
                this.activeTab = index;
            },

            selectItem(item){
                this.dataList.$set(this.activeTab,item);
                this.dataList.splice(this.activeTab+1, this.dataList.length-this.activeTab-1);

                if(this.activeTab < this.maxTab){
                    this.activeTab ++;
                }else{
                    this.activeTab = 0;
                    this.isShowDropdown = false;
                }
            }
        }
    }
</script>