未加星标

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

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

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

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: 需求
tags: gt,lt,label,value,div,li,options,secondOptions,ul,联动,options2isShow,options1isShow,input
分页:12
转载请注明
本文标题:vue2.0.js的多级联动选择器实现方法
本站链接:https://www.codesec.net/view/572570.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(52)