这种列表筛选效果,前端要怎么制作?
-
点击上面服务类型,和服务价格,下面已选条件那里要展示出来,公司的技术选型是 vue,求思路
-
核心代码如下你试试,然后部分逻辑需要自己优化一下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>条件筛选</title> <style> ul { list-style: none; display: flex; flex-wrap: wrap; } li{ padding: 8px; white-space: nowrap; } </style> </head> <body> <div id="app"> <div class="filter-title">服务类型:</div> <ul class="nav filter-list" id="pills-tab" role="tablist"> <li class="nav-item" role="presentation"> <a class="nav-link" id="tabs-all-tab" data-bs-toggle="pill" role="tab" aria-controls="tabs-all" aria-selected="false" @click.stop="handleSearchForm">全部</a> </li> <template v-for="(type,index) in options.mailServiceTypeList"> <li class="nav-item" role="presentation"> <a class="nav-link" data-bs-toggle="pill" :href="'#tabs-'+type.id" role="tab" aria-controls="tabs-1" aria-selected="false" :data-typeid="type.id" @click.stop="handleSearchForm(type)">{{type.name}}</a> </li> </template> </ul> <ul class="nav filter-list" id="pills-tab" role="tablist"> <li class="nav-item" role="presentation"> <a class="nav-link" id="tabs-all-tab" data-bs-toggle="pill" role="tab" aria-controls="tabs-all" aria-selected="false">已选条件</a> </li> <template v-for="(type,index) in selectedRows"> <li class="nav-item" role="presentation"> <a class="nav-link" data-bs-toggle="pill" :href="'#tabs-'+type.id" role="tab" aria-controls="tabs-1" aria-selected="false" :data-typeid="type.id" @click.stop="remove(type)">{{type.name}}</a> </li> </template> </ul> </div> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> <script type="text/javascript"> new Vue({ el:'#app', data: function() { return { options: { mailServiceTypeList: [ {name: '全部', id: 1}, {name: '企业孵化', id: 2}, {name: '研发设计', id: 3}, {name: '检验检测', id: 4}, {name: '知识产权', id: 5}, {name: '技术转移', id: 6} ] }, // 已选条件 selectedRows: [] } }, methods:{ handleSearchForm: function (type) { // TODO: 这里记得做去重处理, 示例代码, 没有写 if(type) this.selectedRows.push(type) }, // 点击删除 remove: function(type){ var list = [] for(let item of this.selectedRows) { if(item.id!=type.id) list.push(type) } this.selectedRows = list } } }) </script> </body> </html>
西南地区IT社群(QQ)
- 云南
- 【昆明网页设计交流吧】243627302
- 【昆明nodejs交流吧】 243626749
- 【VUE】838405306
- 【云南程序员总群】343606807
- 【昆明UI设计】104031254
- 【云南软件外包】15547313
- 贵州
- 【PHP/java源码/站长交流群】55692114
- 四川
- 【成都Java/JavaWeb交流】86669225
- 【vaScript+PHP+MySql】116270060
- 【UI设计/设计交流学习群】135794928
- 重庆
- 【诺基亚 JAVA游戏博物馆】 559479780
- 【PHP,Java,Python,C++接单】 442103442
- 西藏