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 相关文章推荐
CheckBox 如何实现全选?
Jun 23 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
Jul 26 Javascript
Javascript alert消息换行的方法
Aug 07 Javascript
js获取URL的参数的方法(getQueryString)示例
Sep 29 Javascript
jquery浏览器滚动加载技术实现方案
Jun 03 Javascript
jQuery中ajax和post处理json的不同示例对比
Nov 02 Javascript
简单实现jQuery级联菜单
Jan 09 Javascript
js+html制作简单日历的方法
Jun 27 Javascript
React-Native左右联动List的示例代码
Sep 21 Javascript
vue webpack开发访问后台接口全局配置的方法
Sep 18 Javascript
浅谈vue项目打包优化策略
Sep 29 Javascript
使用localStorage替代cookie做本地存储
Sep 25 Javascript
使用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
如何利用php array_multisort函数 对数据库结果进行复杂排序
2013/06/08 PHP
yii实现model添加默认值的方法(2种方法)
2016/01/06 PHP
php关联数组与索引数组及其显示方法
2018/03/12 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
用JS实现一个页面多个css样式实现
2008/05/29 Javascript
javascript数组去重3种方法的性能测试与比较
2013/03/26 Javascript
javascript修改图片src的方法
2015/01/27 Javascript
JavaScript三元运算符的多种使用技巧
2015/04/16 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
2015/09/04 Javascript
jquery移动端TAB触屏切换实现效果
2020/12/22 Javascript
通用javascript代码判断版本号是否在版本范围之间
2015/11/29 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
2016/06/25 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
2017/02/14 Javascript
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
详解小程序循环require之坑
2019/03/08 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
2020/05/15 Javascript
node koa2 ssr项目搭建的方法步骤
2020/12/11 Javascript
[01:00:14]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第三场
2018/04/10 DOTA
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[01:39:04]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第二场 2月1日
2021/03/11 DOTA
利用pyinstaller打包exe文件的基本教程
2019/05/02 Python
Python3环境安装Scrapy爬虫框架过程及常见错误
2019/07/12 Python
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
FLOS美国官网:意大利高级照明工艺的传奇
2018/08/07 全球购物
What is EJB
2016/07/22 面试题
预备党员思想汇报范文
2013/12/29 职场文书
安全生产管理合理化建议书
2014/03/12 职场文书
统计学教授推荐信
2014/09/18 职场文书
学院党委班子四风问题自查报告及整改措施
2014/10/25 职场文书
教师求职信怎么写
2015/03/20 职场文书
童年读书笔记
2015/06/26 职场文书
导游词之千岛湖
2019/09/23 职场文书
Python爬虫:从m3u8文件里提取小视频的正确操作
2021/05/14 Python
浅析Python实现DFA算法
2021/06/26 Python
MySQL 服务和数据库管理
2021/11/11 MySQL
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis