当前位置: 首页 > 编程笔记 >

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

秋建义
2023-03-14
本文向大家介绍vue2.0.js的多级联动选择器实现方法,包括了vue2.0.js的多级联动选择器实现方法的使用技巧和注意事项,需要的朋友参考一下

由于工作需求,想实现一个多级联动选择器,但是网上现有的联动选择器都不是我想要的,我参照基于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 的绑定值:一个由各级菜单的值所组成的数组。