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

2018-02-10 13:12:22来源:作者:人点击

分享

由于工作需求,想实现一个多级联动选择器,但是网上现有的联动选择器都不是我想要的,我参照基于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>

以上这篇vue2.0.js的多级联动选择器实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持第七城市。

您可能感兴趣的文章:

  • 基于vue2.0实现的级联选择器
  • 使用vue.js实现联动效果的示例代码
  • Vue.js组件tree实现省市多级联动

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台