Verwendung von vue2.0.js zur Implementierung von mehrstufigen Verknüpfungsselektoren

Im Folgenden werde ich Ihnen eine Implementierungsmethode für den mehrstufigen Verknüpfungsselektor in vue2.0.js vorstellen. Sie hat einen guten Referenzwert und ich hoffe, dass sie für alle hilfreich ist.

Aufgrund der Arbeitsanforderungen möchte ich einen mehrstufigen Verknüpfungsselektor implementieren, aber keiner der im Internet vorhandenen Verknüpfungsselektoren ist das, was ich auf der Basis der Cascader-Kaskadenauswahl in element-ui möchte vue2.0 Der Stil des Selektors implementiert den mehrstufigen Verknüpfungsselektor, der Ihre eigenen Anforderungen kombiniert. Das Prinzip ist nicht sehr einfach, sondern gehe nur auf den Code ein. . .

<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>

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Verwenden Sie das Auswahl-Dropdown-Feld, um Bindungs- und Wertmethoden in vue.js zu implementieren

Verwenden Sie vue in v - Wie kann erreicht werden, dass die erste Option standardmäßig im Kontrollkästchen für die for-Schleife aktiviert ist?

Wie implementiert man die Wertübergabe und die URL-Codierungskonvertierung in JS-Formularen?

Das obige ist der detaillierte Inhalt vonVerwendung von vue2.0.js zur Implementierung von mehrstufigen Verknüpfungsselektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!