<style> .multilevel{position: relative; font-family: 'microsoft yahei'; font-size:14px; color: #585858} .multilevel a,.multilevel span{cursor: pointer; text-decoration: none; color:#585858; display: inline-block;} .multilevel span.placeholder{font-size: 12px; color: #999999; height: 20px; line-height: 20px} .picker-data{display: inline-block; width: auto; height: 34px; border: 1px solid #ccd0d4; padding:6px 12px; position: relative; border-radius: 3px} .placeholder,.data{display: inline-block; width: 200px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} .data a{font-size: 12px} .select-item a{padding: 0 2px} .select-item a:hover{background: #CCCCCC} .clearData{display: inline-block; width: 30px; margin-left: 10px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} .clearData em{color: #999999; font-size: 12px; font-style: normal;} .picker-dropdown{position: absolute; top: 36px; left: 1px; z-index: 999;} .select-wrap{box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); border-radius: 4px; width: 350px} .select-tab{background: #f0f0f0; border-bottom: 1px solid #ccc;} .select-tab a{display: inline-block; font-size: 12px; padding: 8px 15px; border-left: 1px solid #ccc; border-bottom: 1px solid transparent; margin-bottom: -1px} .select-tab a:first-child {border-left: none} .select-tab a:last-child.active {border-right: 1px solid #ccc} .select-tab a.active{background: #FFFFFF; border-bottom: 1px solid #FFFFFF;} .select-content{background: #FFFFFF;} .levelContent,.noSort{clear: both; list-style: none; margin: 0; padding: 10px;} .levelContent li,.noSort li{display: inline-block; padding: 5px 10px;} .levelContent li.active{background: #5bc0de; border-radius: 4px} .levelContent li.active a{color:#FFFFFF} .noSort li span{color: #ff0000} </style> <template> <div class="multilevel"> <span class="picker-data"> <span v-show="dataList.length==0" class="placeholder" @click="showDropdown">请选择类目</span> <span v-show="dataList.length>0" class="data" @click="showDropdown"> <span class="select-item" v-for="data in dataList"> <i v-if="$index>0">-</i> <a href="javascript:" @click="selectTab($index)">{{data.sortName}}</a> </span> </span> <span class="clearData" @click="destroy"> <em v-show="dataList.length>0">清空</em> </span> </span> <div class="picker-dropdown" v-show="isShowDropdown"> <div class="select-wrap"> <div class="select-tab"> <a v-for="tab in tabList" class="level {{$index==activeTab?'active':''}}" @click="selectTab($index)">{{tab}}</a> </div> <div class="select-content"> <ul v-for="(index,content) in levelContent" class="levelContent" v-show="activeTab==index"> <li v-for="(key,item) in content" class="{{item.id==dataList[index].id?'active':''}}"> <a href="javascript:" @click="selectItem(item)">{{item.sortName}}</a> </li> </ul> <ul v-show="activeTab>=levelContent.length" class="noSort"> <li><span>请选择上级类目!</span></li> </ul> </div> </div> </div> </div> </template> <script> export default { props:{ dataList: {type: Array, default: []} }, data() { return { tabList:["一级目录","二级目录","三级目录"], levelContent:[], isShowDropdown:false, activeTab:0, maxTab:2 } }, ready() { this.fetchAllSortList(); this.blindEvent(); }, methods: { showDropdown(event){ this.isShowDropdown = true; event.stopPropagation();//阻止事件向上冒泡 }, closeDropdown(){ this.activeTab = 0; this.isShowDropdown = false; }, selectTab(index){ this.isShowDropdown = true; this.activeTab = index; }, selectItem(item){ this.dataList.$set(this.activeTab,item); this.dataList.splice(this.activeTab+1, this.dataList.length-this.activeTab-1); if(this.activeTab < this.maxTab){ this.activeTab ++; this.fetchSubSortList(item.id); }else{ this.closeDropdown(); } }, destroy(){ this.dataList.splice(0,this.dataList.length); this.activeTab = 0; this.levelContent.splice(1, this.levelContent.length-1); }, fetchAllSortList(){ this.$http.post("/product/class/queryAllProductSortList").then(function (response) { var rs = response.data; this.levelContent.$set(0,rs.data); }, function (response) { var rs = response.data; console.log(rs.message); }); }, fetchSubSortList(sortId){ this.$http.post("/product/class/queryProductSortList",{ param:sortId }).then(function (response) { var rs = response.data; if(rs.data.length>0){ this.levelContent.$set(this.activeTab,rs.data); }else{ this.closeDropdown(); } }, function (response) { var rs = response.data; console.log(rs.message); }) }, //点击空白处弹层关闭 blindEvent(){ var self = this; $(document).on("click", function(){ self.closeDropdown(); }); $(".picker-dropdown").on("click", function(event){ event.stopPropagation();//阻止事件向上冒泡 }); } } } </script>