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;
}
网友评论