用Vue做一个职业选择或地区选择的三级嵌套组件

设计图长这样：

如图，大概分为三级。点击事件上有个小trick要注意，那就是，第一级点击后显示第二级，第二级点击之后是toggle第三级。

那个职业选择的数据大概有五千多条，有点多，需要拉接口调。这里写个模拟的，结构就是一级一级套对象，代码如下：

function getJobs__list(level,arg1,arg2){
    // 这是展示的
    var Jobs__list = {
        'worker':{
            'coder':{
                'shit-coder':'',
                'bullshit-coder':''
            }
        },
        'buyer':{
            'mbuyer':{
                'boybuyer':'',
                'dadbuyer':''
            },
            'wbuyer':{
                'girlbuyer':'',
            }
        },

    };


    if(level===1){
        var _jobs__flist = {}

        for(key in Jobs__list){
            _jobs__flist[key] = {}
        }
        return _jobs__flist
    };

    if(level === 2 && arg1){


        return Jobs__list[arg1]


    };

    if( level === 3 && arg1 && arg2){

        console.log(arg1,arg2)

        return Jobs__list[arg2][arg1]

    }

}


function getJobSearchResult(searchname){
    //这是用于搜索的
    var o = {
        'algricultrue':{
            'fish':{
                'fish-buyer':{
                    securitylevel:'2',
                },
                'fisherman':{
                    securitylevel:'拒保'
                }
            }
        }
    }
    o['algricultrue']['fish'][searchname] = {
        securitylevel : '1'
    }
    var results = []
    for( key in o){
        if(o.hasOwnProperty(key)){
            for(key2 in o[key]){
                if(o[key].hasOwnProperty(key2)){
                    for (key3 in o[key][key2]){
                        if(o[key][key2].hasOwnProperty(key3)){
                            var s = ''
                            s = key + '-' + key2 + '-' + key3 
                            var so = {}
                            so[s]= o[key][key2][key3]['securitylevel']
                            results.push(so)
                        }
                    }
                }
            }
        }
    }

    return so   
}

忽略丑丑的代码吧，这就是个很粗糙的假冒伪劣接口。

这是个组件：

Vue.component('stackedList',{
    template:"<article class='stackedlist'>
    <div v-for='(f__value,f__key,f__index) in flist' :class='listkind+"__flist"'>
        <header :class='listkind+"__f"' @click='showslist(f__key,f__index)'>{{f__key}}</header>
        <article v-show='ssonshow[f__index]' :class='listkind+"__slist"' v-for='(s__value,s__key,s__index) of f__value'>
            <header :class='listkind+"__s"' @click='showtlist(s__key,f__key,s__index,f__index)'>{{s__key}}</header>
            <article :class='listkind+"__tlist"'>
            <p :class='listkind+"__t"'  v-for='(t__value,t__key,t__index) of s__value' @click='select(t__key)' v-show='tsonshow[f__index][s__index]'>{{t__key}}</p>
            </article>
        </article>
    </div>
</article>
    ",
    props:['listkind','flist'],
    data:function() {
        return {        
            ssonshow:[],
            tsonshow:[],
        }
    },
    methods:{
        showslist:function(f__key,f__index){

            this.$emit('getflist',2,f__key)

            this.ssonshow[f__index] = true

            this.tsonshow[f__index] = []

        },
        showtlist:function(s__key,f__key,s__index,f__index){
            this.$emit('getslist',3,s__key,f__key)

            this.tsonshow[f__index][s__index] = !(!!this.tsonshow[f__index][s__index])
        },
        select:function(t__key){

            this.$emit('passvalue',t__key)
        }
    }
})

组件要套在Jobs组件中（jobs才是那个整体的大组件）

Vue.component('jobs',{
    template:"<div class='jobs'><div class='info info__job'>
                <span class='pretip' >职业</span>
                <input type='text' class='answer' v-model='jobselected' placeholder='请选择职业' @click.prevent='togglejobbox(true,$event)'/>
</div>
<div class='jobbox--curtain' v-show='jobboxonshow'>
    <div class='jobbox'>
        <header>
            <p class='jobbox__header'>查询职业类别</p>
            <div class='jobbox__close' @click='togglejobbox(false,$event)'>+</div>
        </header>
        <input class='jobbox__search' type='text' placeholder='搜索职业' @input='showsearchresult' v-model='searchname'/>
        <stacked-list v-show='!searchname.trim()' :listkind='listkind' :flist='flist' @passvalue='selectjob'  @getflist='getflist' @getslist='getslist'></stacked-list>
        <article class='jobbox__searchresult' v-show='searchname.trim()' >
            <p class='jobbox__searchresult__item' v-for='(securitylevel,searchresult) in searchresults'><span class='jobbox__searchresult__item__job'>{{searchresult}}</span><span class='jobbox__searchresult__item__level'>{{securitylevel}}</span></p>
        </article>
    </div>
</div></div>"
,
    props:['jobselected','flist'],

    data:function(){

        return {

            jobboxonshow : false,

            searchname:'',

            listkind:'jobbox',

            searchresults: {}           
        }
    },
    methods:{

        togglejobbox:function(ifshow,e){

            e.target.blur()

            this.jobboxonshow = ifshow ?  true :false ;
        },

        showsearchresult:function(){

            if(!this.searchname){
                console.error('no searchname')
                return
            }

            var results =  getJobSearchResult(this.searchname)

            this.searchresults = results

        },

        selectjob:function(jobvalue){

            this.$emit('selectjob',jobvalue)

            this.jobboxonshow = false
        },
        getflist: function(level,f__key){
            this.$emit('getflist',2,f__key)
        },
        getslist: function(level,s__key,f__key){
            this.$emit('getslist',3,s__key,f__key)

        }
    }
})

然后在主体的VM里挂上< jobs >< / jobs >即可，注意prop哦~

这里其实有多个人都可以选职业，要注意把接口调用的数据返回放在一个vm中，多个组件共用一个性质。或者干脆就一个组件，只是v-model对应不同的人，做个区分就行。然后因为是一级一级查询的，要把数据先缓存在本地，如果Local查不到，再去调接口。

最后

以上就是魁梧羊为你收集整理的用Vue做一个职业选择或地区选择的三级嵌套组件的全部内容，希望文章能够帮你解决用Vue做一个职业选择或地区选择的三级嵌套组件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。