vue2.0.js的多级联动选择器实现方法
作者:菬袇 时间:2024-04-28 09:23:37
由于工作需求,想实现一个多级联动选择器,但是网上现有的联动选择器都不是我想要的,我参照基于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>
来源:http://blog.csdn.net/qq_34928402/article/details/78752410
标签:vue2.0.js,多级联动,选择器
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
ASP.NET Core优雅的在开发环境保存机密(User Secrets)
2023-07-15 20:25:37
Python实现的简单模板引擎功能示例
2022-01-24 04:47:36
使用python实现飞机大战游戏
2021-05-11 12:02:16
![](https://img.aspxhome.com/file/2023/1/97111_0s.jpg)
在MySQL中为何不建议使用utf8
2024-01-27 07:07:58
![](https://img.aspxhome.com/file/2023/5/126305_0s.jpg)
python下函数参数的传递(参数带星号的说明)
2022-12-20 02:58:59
利用python如何处理nc数据详解
2021-12-07 02:20:13
Python如何实现小程序 无限求和平均
2023-04-13 20:07:40
python 提取key 为中文的json 串方法
2022-02-08 04:55:06
MySQL 实例无法启动的问题分析及解决
2024-01-21 10:50:06
Python动态演示旋转矩阵的作用详解
2022-08-21 02:35:15
![](https://img.aspxhome.com/file/2023/9/70079_0s.png)
python画折线图的程序
2021-07-04 18:08:20
![](https://img.aspxhome.com/file/2023/5/131115_0s.jpg)
python 使用GDAL实现栅格tif转矢量shp的方式小结
2021-10-02 07:13:56
![](https://img.aspxhome.com/file/2023/9/88859_0s.jpg)
关于淘宝商城新版的一点看法
2009-06-28 16:00:00
![](https://img.aspxhome.com/file/UploadPic/20096/28/taobao_mall_2-49s.png)
Python函数实现学员管理系统
2023-06-22 03:32:30
![](https://img.aspxhome.com/file/2023/0/97380_0s.jpg)
python pyaudio音频录制的实现
2022-03-13 08:44:31
![](https://img.aspxhome.com/file/2023/8/115758_0s.png)
python-pymysql获取字段名称-获取内容方式
2024-01-21 05:19:44
SQL 将一列拆分成多列的三种方法
2024-01-23 15:30:18
![](https://img.aspxhome.com/file/2023/4/98004_0s.jpg)
Python真题案例之最长回文子串 周期串详解
2021-12-01 02:57:02
![](https://img.aspxhome.com/file/2023/2/135442_0s.png)
安装完Python包然后找不到模块的解决步骤
2022-01-23 05:38:10
![](https://img.aspxhome.com/file/2023/9/127919_0s.jpg)
python的pytest框架之命令行参数详解(上)
2021-07-23 02:18:07
![](https://img.aspxhome.com/file/2023/9/130579_0s.png)