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


Posted in Javascript onFebruary 09, 2018

由于工作需求,想实现一个多级联动选择器,但是网上现有的联动选择器都不是我想要的,我参照基于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的多级联动选择器实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript instanceof,typeof的区别
Mar 24 Javascript
js封装的textarea操作方法集合(兼容很好)
Nov 16 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
May 31 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
Feb 18 Javascript
JS延时提示框实现方法详解
Nov 26 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
Jun 06 Javascript
AngularJS实现按钮提示与点击变色效果
Sep 07 Javascript
基于Vue2.0的分页组件
Mar 16 Javascript
js绑定事件和解绑事件
Apr 27 Javascript
JavaScript中Object值合并方法详解
Dec 22 Javascript
详解elementUI中input框无法输入的问题
Apr 27 Javascript
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 Vue.js
使用mint-ui实现省市区三级联动效果的示例代码
Feb 09 #Javascript
vue二级路由设置方法
Feb 09 #Javascript
从零开始搭建一个react项目开发
Feb 09 #Javascript
Vue-Router2.X多种路由实现方式总结
Feb 09 #Javascript
浅谈react受控组件与非受控组件(小结)
Feb 09 #Javascript
基于Vue2.X的路由和钩子函数详解
Feb 09 #Javascript
Vuejs 单文件组件实例详解
Feb 09 #Javascript
You might like
上海牌131型七灯四波段四喇叭一级收音机
2021/03/02 无线电
在字符串指定位置插入一段字符串的php代码
2010/02/16 PHP
php empty()与isset()区别的详细介绍
2013/06/17 PHP
php实现的太平洋时间和北京时间互转的自定义函数分享
2014/08/19 PHP
PHP解析RSS的方法
2015/03/05 PHP
浅谈php的优缺点
2015/07/14 PHP
PHP编辑器PhpStrom运行缓慢问题
2017/02/21 PHP
tp5.0框架隐藏index.php入口文件及模块和控制器的方法分析
2020/02/11 PHP
jquery实现的伪分页效果代码
2015/10/29 Javascript
详解AngularJS 模态对话框
2016/04/07 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
2016/06/03 Javascript
js中如何完美的解析数据
2018/03/18 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
2019/01/24 Javascript
Javascript通过控制类名更改样式
2019/05/24 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
2020/05/03 Javascript
js实现无缝轮播图特效
2020/05/09 Javascript
Jquery+javascript实现支付网页数字键盘
2020/12/21 jQuery
[01:28:43]2014 DOTA2华西杯精英邀请赛5 24 DK VS CIS
2014/05/25 DOTA
python新手经常遇到的17个错误分析
2014/07/30 Python
PyQt5每天必学之创建窗口居中效果
2018/04/19 Python
python3+PyQt5实现柱状图
2018/04/24 Python
利用matplotlib实现根据实时数据动态更新图形
2019/12/13 Python
python绘制高斯曲线
2021/02/19 Python
唤醒头发毛囊的秘密武器:Grow Gorgeous
2016/08/28 全球购物
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
Hanky Panky官方网站:内衣和睡衣
2019/07/25 全球购物
《梅兰芳学艺》教学反思
2014/02/24 职场文书
地理教师岗位职责
2014/03/16 职场文书
《永远的白衣战士》教学反思
2014/04/25 职场文书
篮球友谊赛通讯稿
2014/10/10 职场文书
小学工作总结2015
2015/05/04 职场文书
毕业生学校组织意见
2015/06/04 职场文书
Python 循环读取数据内存不足的解决方案
2021/05/25 Python
php去除数组中为0的元素的实例分析
2021/11/17 PHP