🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
### filter > 文档列表筛选标签 筛选列表中的选项值有三部分构成。 1. 当前栏目的子栏目 2. 启用城市区域作为筛选项(包含城市区域子分类)2级 3. 自定义字段作为筛选项 **调用方法** ~~~ <ul class="nav nav-pills"> {foreach $filter as $key=>$vo } <li role="presentation" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> {$vo.name} <span class="caret"></span> </a> <ul class="dropdown-menu"> {foreach $vo.select as $k=>$v } <li role="presentation"><a style="margin-left:20px;text-align:left;color:{eq name='v.active' value='active'}red{/eq}" href="{$v.url}">{$v.value}</a></li> {/foreach} </ul> </li> {/foreach} </ul> ~~~ **循环内可用字段** | 字段 | 名称 | 类型 | 说明 | | --- | --- | --- | --- | | name | 筛选列表名称 | string | | | variable | 筛选列表变量名称 | string | | | select | 筛选项可用值列表 | array | 这是个数组列表,需要循环遍历里面的数据 | | key | 筛选项key | string | | | value | 筛选项value | string | | | active | 筛选项是否点亮 | string | 默认输出'active',css样式类active | | url | 筛选项链接地址 | string | | **数组结构** ~~~ Array ( [0] => Array ( [name] => 栏目 [variable] => category [select] => Array ( [0] => Array ( [key] => all [value] => 全部 [active] => [url] => http://test.19981.com/category/af/category/all ) [1] => Array ( [key] => 7 [value] => 国际二级 [active] => [url] => http://test.19981.com/category/af/category/7 ) ) ) [1] => Array ( [name] => 多选城市 [variable] => duoxuanchengshi [select] => Array ( [0] => Array ( [key] => all [value] => 全部 [active] => [url] => http://test.19981.com/category/af/duoxuanchengshi/all ) [1] => Array ( [key] => 1 [value] => 成都 [active] => [url] => http://test.19981.com/category/af/duoxuanchengshi/1 ) [2] => Array ( [key] => 2 [value] => 德阳 [active] => [url] => http://test.19981.com/category/af/duoxuanchengshi/2 ) [3] => Array ( [key] => 3 [value] => 绵阳 [active] => [url] => http://test.19981.com/category/af/duoxuanchengshi/3 ) ) ) ) ~~~ **输出效果** ![](https://box.kancloud.cn/584f8e9551fd5414fa670da677e6fa2e_527x188.png)