您好,登錄后才能下訂單哦!
由于工作需求,想實(shí)現(xiàn)一個(gè)多級(jí)聯(lián)動(dòng)選擇器,但是網(wǎng)上現(xiàn)有的聯(lián)動(dòng)選擇器都不是我想要的,我參照基于vue2.0的element-ui中的Cascader級(jí)聯(lián)選擇器的樣式實(shí)現(xiàn)了復(fù)合自己要求的多級(jí)聯(lián)動(dòng)選擇器,原理很簡(jiǎn)單,不多說,直接上代碼。。。
<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: '導(dǎo)航', children: [{ value: 'cexiangdaohang', label: '側(cè)向?qū)Ш? }, { value: 'dingbudaohang', label: '頂部導(dǎo)航' }] } ], 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的多級(jí)聯(lián)動(dòng)選擇器實(shí)現(xiàn)方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。