使用vue2.0.js實作多級聯動選擇器

下面我就為大家分享一篇vue2.0.js的多級連動選擇器實作方法，具有很好的參考價值，希望對大家有幫助。

由於工作需求，想實現一個多級聯動選擇器，但是網上現有的聯動選擇器都不是我想要的，我參照基於vue2.0的element-ui中的Cascader級聯選擇器的樣式實現了複合自己要求的多級連動選擇器，原理很簡單，不多說，直接上程式碼。 。 。

<template>
 <p id="app">
 <p class="select">
  <p class="input_text"><input type="text" name="" v-on:focus="options1Show" v-model="result"></p>
  <p class="options1" v-show="options1isShow">
  <ul>
   <li v-on:click="toClick(option.value)" v-for="option in options">{{option.label}}</li>
  </ul>
  </p>
  <p class="options2" v-show="options2isShow">
  <ul >
   <li v-for="item in secondOptions" v-on:click="selectResult(item.label,item.value)">{{item.label}}</li>
  </ul>
  </p>
 </p>
 </p>
</template>
<script>
export default {
 name: &#39;app&#39;,
 data(){
 return {
  options:[
  {
   value:&#39;zhinan&#39;,
   label:&#39;指南&#39;,
   children:[
   {
    value: &#39;yizhi&#39;,
    label: &#39;一致&#39;
   }, {
    value: &#39;fankui&#39;,
    label: &#39;反馈&#39;
   }, {
    value: &#39;xiaolv&#39;,
    label: &#39;效率&#39;
   }, {
    value: &#39;kekong&#39;,
    label: &#39;可控&#39;
   }
   ]
  },
  {
   value: &#39;daohang&#39;,
   label: &#39;导航&#39;,
   children: [{
   value: &#39;cexiangdaohang&#39;,
   label: &#39;侧向导航&#39;
   }, 
   {
   value: &#39;dingbudaohang&#39;,
   label: &#39;顶部导航&#39;
   }]
  }
  ],
  secondOptions:[],
  options1isShow:false,
  options2isShow:false,
  result:&#39;&#39;
 }
 },
 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>

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

在vue.js中利用select下拉方塊實作綁定和取值方法

透過vue在v -for循環複選框中預設勾選第一個如何實現？

在JS表單中如何實現傳值和URL編碼轉換？

以上是使用vue2.0.js實作多級聯動選擇器的詳細內容。更多資訊請關注PHP中文網其他相關文章！