由于工作需求, 想实现一个多级联动选择器, 但是网上现有的联动选择器都不是我想要的, 我参照基于 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://www.jb51.net/article/134778.htm