由于工作需求,想实现一个多级联动选择器,但是网上现有的联动选择器都不是我想要的,我参照基于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实现的级联选择器,包括了基于vue2.0实现的级联选择器的使用技巧和注意事项,需要的朋友参考一下 基于Vue的级联选择器,可以单项,二级, 三级级联,多级级联 web开发中我们经常会遇到级联选择器的问题,尤其是在表单中,无外乎几种情况: 单个级联 (下拉选择框,单选) 单个级联 (多项选择) 二级联动 (省份和城市联动) 三级联动 (省市区联动) 在jquery中有
本文向大家介绍JS简单实现城市二级联动选择插件的方法,包括了JS简单实现城市二级联动选择插件的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JS简单实现城市二级联动选择插件的方法。分享给大家供大家参考。具体如下: js实现的城市联动选择菜单,网上经常见到,不多介绍了,本款城市选择菜单原型基于Select,主要使用JavaScript来实现,运用了数组和循环等基础技巧制作完成的。本效果
本文向大家介绍Android日期选择器实现年月日三级联动,包括了Android日期选择器实现年月日三级联动的使用技巧和注意事项,需要的朋友参考一下 最近项目里面用到了一个日期选择器,实现现在主流的WheelView滑动选择,整理了下,做了个Demo.废话不多说,直接上代码. 主布局:activity_main.xml MainActivity: 主要的类: 底部弹出框布局: 运行效果图: 以上就是
Cascader 级联选择器 当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。 基础用法 有两种触发子菜单的方式 只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器。通过props.expandTrigger可以定义展开子级菜单的触发方式。 <div class="block"> <span class="demonstration">默认 c
当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。 基础用法 有两种触发子菜单的方式 只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器。通过props.expandTrigger可以定义展开子级菜单的触发方式。 <div class="block"> <span class="demonstration">默认 click 触发子菜单</spa
Cascader 级联选择器 当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。 基础用法 有两种触发子菜单的方式 :::demo 只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器。通过expandTrigger可以定义展开子级菜单的触发方式。本例还展示了onChange事件,它的参数为 Cascader 的绑定值:一个由各级菜单的值所组成的数组。