element的多级选中_vue2.0.js的多级联动选择器实现方法

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

• {{option.label}}

• {{item.label}}

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

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;

}

}

}

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;

}

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