vue2.0.js的多级联动选择器实现方法

由于工作需求，想实现一个多级联动选择器，但是网上现有的联动选择器都不是我想要的，我参照基于vue2.0的element-ui中的Cascader级联选择器的样式实现了复合自己要求的多级联动选择器，原理很简单，不多说，直接上代码。。。

<template>
<div id="app">
<div class="select">
 <div class="input_text"><input type="text" name="" v-on:focus="options1Show" v-model="result"></div>
 <div class="options1" v-show="options1isShow">
 <ul>
  <li v-on:click="toClick(option.value)" v-for="option in options">{{option.label}}</li>
 </ul>
 </div>
 <div class="options2" v-show="options2isShow">
 <ul >
  <li v-for="item in secondOptions" v-on:click="selectResult(item.label,item.value)">{{item.label}}</li>
 </ul>
 </div>
</div>
</div>
</template>
<script>
export default {
name: 'app',
data(){
return {
 options:[
 {
  value:'zhinan',
  label:'指南',
  children:[
  {
   value: 'yizhi',
   label: '一致'
  }, {
   value: 'fankui',
   label: '反馈'
  }, {
   value: 'xiaolv',
   label: '效率'
  }, {
   value: 'kekong',
   label: '可控'
  }
  ]
 },
 {
  value: 'daohang',
  label: '导航',
  children: [{
  value: 'cexiangdaohang',
  label: '侧向导航'
  },
  {
  value: 'dingbudaohang',
  label: '顶部导航'
  }]
 }
 ],
 secondOptions:[],
 options1isShow:false,
 options2isShow:false,
 result:''
}
},
methods:{
options1Show:function(){
 this.options1isShow=true;
},
toClick:function(item){
 this.secondOptions=[];
 for(var i=0;i<this.options.length;i++){
 if(this.options[i].value==item){
  console.log(this.options[i].children);
  this.secondOptions=this.options[i].children;
  console.log(this.secondOptions);
 }
 }
 this.options2isShow=true;
},
selectResult:function(label){
 this.result=label;
 this.options1isShow=false;
 this.options2isShow=false;
}
}
}
</script>
<style>
li,ul{
list-style: none;
padding:0;
margin:0;
}
li{
height:40px;
line-height: 40px;
border-bottom: 1px solid #ededed;
box-sizing: border-box;
text-align: center;
cursor: pointer;
}
.select{
position: relative;
}
.input_text>input{
width:170px;
height:30px;
border:1px solid #ddd;
}
.options1,.options2{
width:170px;
height:200px;
border:1px solid #ddd;
position: absolute;
background: #fff;
overflow-y: auto;
}
.options2{
left:170px;
}
</style>

来源：http://blog.csdn.net/qq_34928402/article/details/78752410