二级联动组件

HTML结构

<div class="select">
                <div class="options1" v-show="options1isShow">
                    <ul>
                        <li v-on:click="toClick(i.value)" v-for="(i, idx) in  options" :key="idx">{{i.name}}</li>
                    </ul>
                </div>
                <div class="options2" v-show="options2isShow">
                    <ul>
                        <li v-for="(i, idx) in secondOptions" :key="idx" v-on:click="selectResult(i.name,i.value)" >{{i.name}}</li>
                    </ul>
                </div>
            
            </div>

js Data数据

options: [
                {
                    name: '抵押贷款',
                    value: 'LOAN_MORTGAGE',
                    children: [
                         {
                            name: '全部',
                            value: null
                        },
                        {
                            name: '个人住房商业贷款',
                            value: 'LOAN_HOUSING'
                        },
                        {
                            name: '公寓商业贷款',
                            value: 'LOAN_APARTMENT'
                        },
                        {
                            name: '厂房贷款',
                            value: 'LOAN_FACTORY'
                        },
                        {
                            name: '办公楼抵押贷款',
                            value: 'LOAN_OFFICE_MORTGAGE'
                        },
                        {
                            name: '流动资金贷款',
                            value: 'LOAN_WORKINGFUND'
                        },
                        {
                            name: '个人消费贷款',
                            value: 'LOAN_CONSUMER'
                        },
                        {
                            name: '其它',
                            value: 'MORTGAGE_OTHER'
                        }
                    ]
                },
                {
                    name: '信用贷款',
                    value: 'LOAN_CREDIT',
                    children: [
                        {
                            name: '全部',
                            value: null
                        },
                        {
                            name: '个人经营性贷款',
                            value: 'LOAN_OPERATIONAL'
                        },
                        {
                            name: '流动资金贷款',
                            value: 'LOAN_CAPITAL'
                        },
                        {
                            name: '薪金贷',
                            value: 'LOAN_SALARY'
                        },
                        {
                            name: '按揭房放大贷',
                            value: 'BIG_LOAN_HOUSE'
                        },
                        {
                            name: '公积金贷款',
                            value: 'LOAN_FUND'
                        },
                        {
                            name: '社保贷',
                            value: 'LOAN_SECURITY'
                        },
                        {
                            name: '保单放大贷',
                            value: 'BIG_LOAN_POLICY'
                        },
                        {
                            name: '汽车贷',
                            value: 'LOAN_CAR'
                        },
                        {
                            name: '按揭车放大贷',
                            value: 'BIG_LOAN_CAR'
                        },
                        {
                            name: '助学贷款',
                            value: 'LOAN_STUDY'
                        },
                        {
                            name: '消费贷款',
                            value: 'LOAN_CONSUMPTION'
                        },
                        {
                            name: '创业贷款',
                            value: 'LOAC_ENTREPRENEURSHIP'
                        },
                        {
                            name: '其它',
                            value: 'CREDIT_OTHER'
                        }
                    ]
                }   
            ],
            loanVarietyType:{},
            selected: '',
            secondOptions: [],
            options1isShow: true,
            options2isShow: false,

js 的methods方法

 toClick(item) {
            this.secondOptions = [];
            for (var i = 0; i < this.options.length; i++) {
                if (this.options[i].value == item) {
                    this.secondOptions = this.options[i].children;
                    this.loanVarietyType=this.options[i]
                }
            }
            this.options2isShow = true;
        },
        selectResult(name,value) {
            this.$toast(`${this.loanVarietyType.name}：${name}`)
            this.options1isShow = false;
            this.options2isShow = false;
            if(this.loanVarietyType.value=="LOAN_MORTGAGE"){
                this.selected={
                    loanVarietyType:this.loanVarietyType.value,
                    loanMortgage:value,
                    loanCredit:null
                }
                 this.$store.dispatch('pushloanVarietyType', this.selected)
                this.$emit('loanVarietyType', this.selected)
            } 
            if(this.loanVarietyType.value=="LOAN_CREDIT"){
                this.selected={
                    loanVarietyType:this.loanVarietyType.value,
                    loanMortgage:null,
                    loanCredit:value
                }
                 this.$store.dispatch('pushloanVarietyType', this.selected)
                this.$emit('loanVarietyType', this.selected)
            }
        },

css样式

li,ul{
    list-style: none;
    padding:0;
    margin:0;
}
li{
    height:1rem;
    line-height: 1rem;
    border-bottom: 1px solid #ededed;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
}
.select{
    position: relative;
}
.options1{
    width:2rem;
    height:2.01rem;
    border:1px solid #ddd;
    position: absolute;
    background: #fff;
    overflow-y: auto;
}
.options2{
    width:4rem;
    height:7rem;
    border:1px solid #ddd;
    position: absolute;
    background: #fff;
    overflow-y: auto;
    left:2rem;
}