filter 筛选
- 属性说明
  - selections 中的 type 有效值
- 示例
  - 代码示例
  - 数据示例

filter 筛选

解释：筛选，由筛选头部（filter-header）以及筛选面板（filter-body）组成，其中筛选面板支持单列筛选、级联筛选、多项选择筛选以及自定义筛选。

属性说明

属性名	类型	必填	默认值	说明
filterId	String	是		筛选组件的唯一标示
selections	String	是		筛选项内容数组，数组格式为： [{ text: ‘名称’, value: ‘值’, type: ‘single’/‘cascade’/‘checkbox-group’/‘custom’, options: [{ text: ‘’, value: ‘’, highlight: false, textWidth: 100 }] }] `highlight: false`表示选中后，筛选头部不高亮显示； `textWidth: 100`表示筛选头部宽度为 100px
value	String/Number/Array	否		选中项的值
border	Boolean	否	true	筛选器头部（filter-header）是否带有下边线
fontColor	String	否	#000	筛选器头部（filter-header）默认状态下的文字颜色
iconColor	String	否	#000	筛选器头部（filter-header）默认状态下的 icon 颜色
activeColor	String	否	#2772fb	筛选器选中时筛选头部（filter-header）以及筛选面板（filter-body）icon 颜色
disColor	String	否	#666	筛选器选中时筛选头部（filter-header）配置不高亮（highlight: false）时的文字和 icon 颜色
filter-header-class	String	否		筛选组件头部的外部样式类，可用于修改整个头部的最外层样式
filter-btn-class	String	否		筛选组件头部的外部样式类，可用于修改某个头部按钮的样式
filter-btn-text-class	String	否		筛选组件头部的外部样式类，可用于修改某个头部的文字样式
filter-body-class	String	否		筛选组件展开时筛选面板（filter-body）外部样式类，可用于修改筛选面板的最外层样式
bindselect	EventHandle	否		更改筛选面板中内容时触发，可用于获取组件选中的内容
bindexpand	EventHandle	否		点击筛选头部或者筛选面板关闭时触发，可用于获取筛选面板收起 / 展开状态

selections 中的 type 有效值

值	说明
single	默认值，筛选组件展开后为单列面板
cascade	筛选组件展开后为筛选面板为级联面板，tips：筛选组件目前最多支持 3 级 options 格式为：[{ text: ‘’, value: ‘’, children: [{ text: ‘’, value: ‘’ }] }]
checkbox-group	筛选组件展开后为多选面板。需要修改多选面板样式，可以在 selections 中增加 column、itemStyle 等配置，可参考 checkbox-group 组件
custom	筛选组件展开后为自定义面板。如果你想要自定义筛选面板，则 selections 需要增加 slot ，如：`slot=custom`

type 为 single 时的样式

属性名	类型	必填	说明
filter-singlelist-class	String	否	单列筛选外部样式类，可用于修改单列筛选组件最外层样式
filter-singlelist-item-class	String	否	单列筛选外部样式类，可用于修改单列筛选组件中每一项展开元素的样式
filter-singlelist-item-text-class	String	否	单列筛选外部样式类，可用于修改单列筛选组件中每一项展开元素的文字样式

type 为 cascade 时的样式

属性名	类型	必填	说明
filter-cascade-class	String	否	级联筛选外部样式类，可用户修改级联筛选组件最外层样式
filter-cascade-column-class	String	否	级联筛选组件外部样式类，可用户修改组件展开面板中，某一列的样式
filter-cascade-column-item-class	String	否	级联筛选组件外部样式类，可用户修改组件展开面板中，某一列中某一项的样式
filter-cascade-column-item-text-class	String	否	级联筛选组件外部样式类，可用户修改组件展开面板中，某一列中某一项的文字的样式

type 为 checkbox-group 时的样式

属性名	类型	必填	默认值	说明
activeTextColor	String	否	#2772fb	筛选面板（filter-body）为多项选择筛选时选中时的文字颜色
activeIconColor	String	否	#2772fb	筛选面板（filter-body）为多项选择筛选时选中时的 icon 颜色
activeBgColor	String	否	#2772fb	筛选面板（filter-body）为多项选择筛选时选中时的背景颜色
filter-checkbox-group-class	String	否		多项筛选组件外部样式类，可用于修改组件最外层样式
checkbox-group-class	String	否		多项组件的外部样式类，可用于修改组件展开的多项选择面板样式

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例

SWAN
JS
CSS
JSON


 

  <view class="wrap">

   <view class="filter">

   <view class="card-area" s-for="item, index in headerArray">

   <view class="top-description border-bottom">{{item.title}}</view>

   <view class="content content-{{index}}">

   <smt-filter-header

   border="{{false}}"

   font-color="{{item.fontColor}}"

   icon-color="{{item.iconColor}}"

   selections="{{item.selections}}"

   filter-id="{{index + 1}}"

   />

   </view>

   </view>

   <view class="card-area" s-for="item, index in filterData">

   <view class="top-description border-bottom">{{item.title}}</view>

   <view class="content">

   <smt-filter-header

   data-index="{{index}}"

   selections="{{item.selections}}"

   bind:select="selHdl"

   bind:expand="expandHdl"

   filter-id="{{index + 6}}"

   />

   <view class="body-wrap">

   <smt-filter-body

   s-if="item.type === 'custom'"

   class="{{item.class || 'filter-body'}}"

   filter-id="{{index + 6}}"

   selections="{{item.selections}}">

   <block slot="custom">

   <view class="scroll">

   <view class="custom-content" s-for="item in customTitleArray" key="{{item}}">

   <view class="custom-header {{!customData[item].showIcon ? 'no-icon' : ''}}" data-key="{{item}}" bindtap="panelExpandHdl">

   <view

   s-if="customData[item].label"

   class="custom-content-label">{{customData[item].label}}

   </view>

   <block s-if="customData[item].showIcon">

   <gov-icon name="{{customData[item].spread ? 'arrow-up-o' : 'arrow-down-o'}}" color="#ccc" size="25.362rpx"></gov-icon>

   </block>

   </view>

   <view class="checkbox-group-wrap {{

   customData[item].spread

   ? 'filter-checkbox-default'

   : 'filter-checkbox-spread'

   }}">

   <smt-checkbox-group

   s-if="customData[item].type === 'checkbox-group'"

   checkbox-group-class="filter-checkbox-group"

   column="{{customData[item].column}}"

   options="{{customData[item].options}}"

   value="{{customData[item].value}}"

   data-key="{{item}}"

   itemStyle="{{customData[item].itemStyle}}"

   bind:change="changeHdl"

   />

   </view>

   </view>

   </view>

   <view class="submit-panel">

   <button

   class="btn reset"

   type="default"

   bindtap="resetHdl"

   disabled="{{resetDisabled}}"

   >重置</button>

   <button

   class="btn submit"

   type="primary"

   bindtap="ensureHdl"

   >确定</button>

   </view>

   </block>

   </smt-filter-body>

   <smt-filter-body

   s-else

   class="{{item.class || 'filter-body'}}"

   checkbox-group-class="filter-checkbox-group"

   filter-id="{{index + 6}}"

   selections="{{item.selections}}"

   />

   </view>

   <view s-if="item.type === 'fillback'" class="{{item.showFillBackBtn ? '' : 'border-top'}}">

   <view class="fill-back-tips">

   将数据“上海市”回填到筛选器一中，数据“东厂社区”回填到筛选器三中

   </view>

   <view class="fill-back-button">

   <button class="fillback-first-btn" data-btn-index="1" bindtap="fillback" type="primary">回填筛选器一</button>

   <button class="fillback-last-btn" data-btn-index="2" bindtap="fillback" type="primary">回填筛选器三</button>

   </view>

   </view>

   </view>

   </view>

   </view>

  </view>

数据示例


 

  import {upx2rpx} from '@smt-ui/component/src/common/utils/px';

  // 筛选头部数据

  export const headerArray = [

   {

   title: '单个筛选',

   selections: [

   {

   text: '筛选器一',

   value: '1'

   }

   ]

   },

   {

   title: '两个筛选',

   selections: [

   {

   text: '筛选器一',

   value: '1'

   },

   {

   text: '筛选器二',

   value: '2'

   }

   ]

   },

   {

   title: '三个筛选',

   selections: [

   {

   text: '筛选器一',

   value: '1'

   },

   {

   text: '筛选器二',

   value: '2'

   },

   {

   text: '筛选器三',

   value: '3'

   }

   ]

   },

   {

   title: '四个筛选',

   selections: [

   {

   text: '筛选器超过四个字打点',

   value: '1'

   },

   {

   text: '筛选器二',

   value: '2'

   },

   {

   text: '筛选器三',

   value: '3'

   },

   {

   text: '筛选器四',

   value: '4'

   }

   ]

   },

   {

   title: '自定义样式',

   fontColor: '#2772fb',

   iconColor: '#2772fb',

   selections: [

   {

   text: '最多支持8个字超过打点',

   textWidth: 386

   }

   ]

   }

  ];

  // 级联筛选第一列数据

  const cascadeFirstOptions = [

   {

   text: '全部所在地区',

   value: 'all',

   children: [

   {

   value: 'all',

   text: '全部所在地区'

   }

   ]

   },

   {

   value: 'bj',

   text: '北京市',

   children: [

   {

   value: 3848,

   text: '全部北京市'

   },

   {

   value: 3851,

   text: '东城区'

   },

   {

   value: 3852,

   text: '西城区'

   },

   {

   value: 3853,

   text: '海淀区'

   },

   {

   value: 3854,

   text: '朝阳区'

   },

   {

   value: 3855,

   text: '丰台区'

   },

   {

   value: 3856,

   text: '石景山区'

   },

   {

   value: 3857,

   text: '通州区'

   },

   {

   value: 3858,

   text: '顺义区'

   },

   {

   value: 3859,

   text: '房山区'

   },

   {

   value: 3860,

   text: '大兴区'

   },

   {

   value: 3861,

   text: '昌平区'

   },

   {

   value: 3862,

   text: '怀柔区'

   },

   {

   value: 3863,

   text: '平谷区'

   },

   {

   value: 3864,

   text: '门头沟区'

   },

   {

   value: 3865,

   text: '密云区'

   },

   {

   value: 3866,

   text: '延庆区'

   }

   ]

   },

   {

   value: 'tj',

   text: '天津市',

   children: [

   {

   value: 3849,

   text: '全部天津市'

   },

   {

   value: 3879,

   text: '和平区'

   },

   {

   value: 3880,

   text: '河东区'

   },

   {

   value: 3881,

   text: '河西区'

   },

   {

   value: 3882,

   text: '南开区'

   },

   {

   value: 3883,

   text: '河北区'

   },

   {

   value: 3884,

   text: '红桥区'

   },

   {

   value: 3885,

   text: '塘沽区'

   },

   {

   value: 3886,

   text: '汉沽区'

   },

   {

   value: 3887,

   text: '大港区'

   },

   {

   value: 3888,

   text: '东丽区'

   },

   {

   value: 3889,

   text: '西青区'

   },

   {

   value: 3890,

   text: '津南区'

   },

   {

   value: 3891,

   text: '北辰区'

   },

   {

   value: 3892,

   text: '武清区'

   },

   {

   value: 3893,

   text: '宝坻区'

   },

   {

   value: 3894,

   text: '宁河县'

   },

   {

   value: 3895,

   text: '静海区'

   },

   {

   value: 3896,

   text: '蓟州区'

   },

   {

   value: 3897,

   text: '滨海新区'

   }

   ]

   },

   {

   value: 'hb',

   text: '河北省',

   children: [

   {

   value: 3850,

   text: '全部河北省'

   },

   {

   value: 3867,

   text: '石家庄市'

   },

   {

   value: 3868,

   text: '唐山市'

   },

   {

   value: 3869,

   text: '秦皇岛市'

   },

   {

   value: 3870,

   text: '邯郸市'

   },

   {

   value: 3871,

   text: '邢台市'

   },

   {

   value: 3872,

   text: '保定市'

   },

   {

   value: 3873,

   text: '张家口市'

   },

   {

   value: 3874,

   text: '承德市'

   },

   {

   value: 3875,

   text: '沧州市'

   },

   {

   value: 3876,

   text: '廊坊市'

   },

   {

   value: 3877,

   text: '衡水市'

   },

   {

   value: 3878,

   text: '涿州市'

   }

   ]

   }

  ];

  // 级联筛选第二和第三列数据

  export const cascadeSecondAndThirdOptions = [

   {

   text: '东城区',

   value: '110101000000',

   children: [

   {

   text: '全部街道',

   value: '110101000000',

   children: [

   {

   text: '全部社区',

   value: '110101000000'

   }

   ]

   },

   {

   text: '东城区安定门街道',

   value: '110101004000',

   children: [

   {

   text: '全部社区',

   value: '110101004000'

   }

   ]

   },

   {

   text: '东城区建国门街道',

   value: '110101008000',

   children: [

   {

   text: '全部社区',

   value: '110101008000'

   },

   {

   text: '崇内社区',

   value: '11110101000033398110'

   },

   {

   text: '东总布社区',

   value: '11110101000033398111'

   },

   {

   text: '金宝街北社区',

   value: '11110101000033398103'

   },

   {

   text: '大雅宝社区',

   value: '11110101000033398104'

   },

   {

   text: '赵家楼社区',

   value: '11110101000033398105'

   },

   {

   text: '站东社区',

   value: '11110101000033398106'

   }

   ]

   },

   {

   text: '东城区朝阳门街道',

   value: '110101007000',

   children: [

   {

   text: '全部社区',

   value: '110101007000'

   }

   ]

   },

   {

   text: '东城区东直门街道',

   value: '110101009000',

   children: [

   {

   text: '全部社区',

   value: '110101009000'

   }

   ]

   },

   {

   text: '东城区东华门街道',

   value: '110101001000',

   children: [

   {

   text: '全部社区',

   value: '110101001000'

   },

   {

   text: '正义路社区',

   value: '11110101000033443B01'

   },

   {

   text: '台基厂社区',

   value: '11110101000033443B08'

   },

   {

   text: '南池子社区',

   value: '11110101000033443B09'

   },

   {

   text: '智德社区',

   value: '11110101000033443B11'

   },

   {

   text: '银闸社区',

   value: '11110101000033443B13'

   },

   {

   text: '王府井社区',

   value: '11110101000033443B19'

   },

   {

   text: '东厂社区',

   value: '11110101000033443B20'

   }

   ]

   },

   {

   text: '东城区和平里街道',

   value: '110101010000',

   children: [

   {

   text: '全部社区',

   value: '110101010000'

   }

   ]

   },

   {

   text: '东城区北新桥街道',

   value: '110101005000',

   children: [

   {

   text: '全部社区',

   value: '110101005000'

   },

   {

   text: '北官厅社区',

   value: '11110101000033478X01'

   },

   {

   text: '民安社区',

   value: '11110101000033478X02'

   },

   {

   text: '北新仓社区',

   value: '11110101000033478X03'

   },

   {

   text: '海运仓社区',

   value: '11110101000033478X04'

   }

   ]

   }

   ]

   },

   {

   text: '西城区',

   value: '110102000000',

   children: [

   {

   text: '全部街道',

   value: '110102000000',

   children: [

   {

   text: '全部社区',

   value: '110102000000'

   }

   ]

   },

   {

   text: '西城区白纸坊街道',

   value: '110102019000',

   children: [

   {

   text: '全部社区',

   value: '110102019000'

   }

   ]

   },

   {

   text: '西城区椿树街道',

   value: '110102015000',

   children: [

   {

   text: '全部社区',

   value: '110102015000'

   }

   ]

   },

   {

   text: '西城区大栅栏街道',

   value: '110102013000',

   children: [

   {

   text: '全部社区',

   value: '110102013000'

   }

   ]

   },

   {

   text: '西城区德胜街道',

   value: '110102010000',

   children: [

   {

   text: '全部社区',

   value: '110102010000'

   },

   {

   text: '石油社区',

   value: '1111010200003821X001'

   },

   {

   text: '水电社区',

   value: '1111010200003821X002'

   },

   {

   text: '煤炭社区',

   value: '1111010200003821X003'

   },

   {

   text: '安德路南社区',

   value: '1111010200003821X004'

   },

   {

   text: '安德路北社区',

   value: '1111010200003821X005'

   },

   {

   text: '德外大街西社区',

   value: '1111010200003821X006'

   },

   {

   text: '人定湖西里社区',

   value: '1111010200003821X007'

   }

   ]

   },

   {

   text: '西城区广安门内街道',

   value: '110102017000',

   children: [

   {

   text: '全部社区',

   value: '110102017000'

   },

   {

   text: '西便门内社区',

   value: '11110102000048303U01'

   },

   {

   text: '长椿街西社区',

   value: '11110102000048303U02'

   },

   {

   text: '槐柏树街北里社区',

   value: '11110102000048303U03'

   },

   {

   text: '西便门东里社区',

   value: '11110102000048303U04'

   },

   {

   text: '西便门西里社区',

   value: '11110102000048303U05'

   },

   {

   text: '报国寺社区',

   value: '11110102000048303U06'

   },

   {

   text: '核桃园社区',

   value: '11110102000048303U07'

   }

   ]

   },

   {

   text: '西城区广安门外街道',

   value: '110102020000',

   children: [

   {

   text: '全部社区',

   value: '110102020000'

   }

   ]

   }

   ]

   },

   {

   text: '朝阳区',

   value: '110105000000',

   children: [

   {

   text: '全部街道',

   value: '110105000000',

   children: [

   {

   text: '全部社区',

   value: '110105000000'

   }

   ]

   },

   {

   text: '朝阳区安贞街道',

   value: '110105008000',

   children: [

   {

   text: '全部社区',

   value: '110105008000'

   }

   ]

   },

   {

   text: '朝阳区奥运村街道',

   value: '110105031000',

   children: [

   {

   text: '全部社区',

   value: '110105031000'

   },

   {

   text: '国奥村社区',

   value: '11110105000053532601'

   },

   {

   text: '拂林园社区',

   value: '11110105000053532613'

   },

   {

   text: '双泉社区',

   value: '11110105000053532602'

   },

   {

   text: '林萃社区',

   value: '11110105000053532603'

   },

   {

   text: '总装社区',

   value: '11110105000053532604'

   },

   {

   text: '万科星园社区',

   value: '11110105000053532605'

   },

   {

   text: '绿色家园社区',

   value: '11110105000053532606'

   }

   ]

   },

   {

   text: '朝阳区八里庄街道',

   value: '110105015000',

   children: [

   {

   text: '全部社区',

   value: '110105015000'

   }

   ]

   },

   {

   text: '朝阳区朝外街道',

   value: '110105002000',

   children: [

   {

   text: '全部社区',

   value: '110105002000'

   }

   ]

   },

   {

   text: '朝阳区大屯街道',

   value: '110105025000',

   children: [

   {

   text: '全部社区',

   value: '110105025000'

   }

   ]

   },

   {

   text: '朝阳区东湖街道',

   value: '110105043000',

   children: [

   {

   text: '全部社区',

   value: '110105043000'

   },

   {

   text: '望京花园社区',

   value: '11110105787781823F01'

   },

   {

   text: '利泽西园一区社区',

   value: '11110105787781823F02'

   },

   {

   text: '望湖社区',

   value: '11110105787781823F03'

   },

   {

   text: '望京西园社区',

   value: '11110105787781823F04'

   },

   {

   text: '南湖中园北社区',

   value: '11110105787781823F05'

   },

   {

   text: '南湖东园北社区',

   value: '11110105787781823F06'

   },

   {

   text: '果岭里社区',

   value: '11110105787781823F07'

   }

   ]

   }

   ]

   },

   {

   text: '丰台区',

   value: '110106000000',

   children: [

   {

   text: '全部街道',

   value: '110106000000',

   children: [

   {

   text: '全部社区',

   value: '110106000000'

   }

   ]

   },

   {

   text: '丰台区大红门街道',

   value: '110106004000',

   children: [

   {

   text: '全部社区',

   value: '110106004000'

   }

   ]

   },

   {

   text: '丰台区东高地街道',

   value: '110106006000',

   children: [

   {

   text: '全部社区',

   value: '110106006000'

   },

   {

   text: '东高地社区',

   value: '11110106000063423Q01'

   },

   {

   text: '三角地第一社区',

   value: '11110106000063423Q02'

   },

   {

   text: '三角地第二社区',

   value: '11110106000063423Q03'

   },

   {

   text: '西洼地社区',

   value: '11110106000063423Q04'

   },

   {

   text: '六营门社区',

   value: '11110106000063423Q05'

   },

   {

   text: '万源东里社区',

   value: '11110106000063423Q06'

   },

   {

   text: '万源西里社区',

   value: '11110106000063423Q07'

   },

   {

   text: '万源南里社区',

   value: '11110106000063423Q08'

   },

   {

   text: '梅源社区',

   value: '11110106000063423Q09'

   },

   {

   text: '东营房社区',

   value: '11110106000063423Q10'

   }

   ]

   },

   {

   text: '丰台区东铁营街道',

   value: '110106007000',

   children: [

   {

   text: '全部社区',

   value: '110106007000'

   },

   {

   text: '宋庄路第二社区',

   value: '11110106000063474101'

   },

   {

   text: '四方景园二社区',

   value: '11110106000063474126'

   },

   {

   text: '同仁园社区',

   value: '11110106000063474102'

   },

   {

   text: '鑫兆雅园社区',

   value: '11110106000063474103'

   },

   {

   text: '政馨家园社区',

   value: '11110106000063474104'

   },

   {

   text: '成仪路社区',

   value: '11110106000063474105'

   },

   {

   text: '成寿寺社区',

   value: '11110106000063474106'

   },

   {

   text: '横七条路第一社区',

   value: '11110106000063474107'

   },

   {

   text: '横七条路第二社区',

   value: '11110106000063474108'

   },

   {

   text: '横七条路第三社区',

   value: '11110106000063474109'

   },

   {

   text: '红狮家园社区',

   value: '11110106000063474110'

   },

   {

   text: '华苇景苑社区',

   value: '11110106000063474111'

   },

   {

   text: '刘家窑第一社区',

   value: '11110106000063474112'

   },

   {

   text: '刘家窑第二社区',

   value: '11110106000063474113'

   },

   {

   text: '刘家窑第三社区',

   value: '11110106000063474114'

   },

   {

   text: '木樨园第一社区',

   value: '11110106000063474115'

   },

   {

   text: '木樨园第二社区',

   value: '11110106000063474116'

   },

   {

   text: '南方庄社区',

   value: '11110106000063474117'

   },

   {

   text: '蒲安里第一社区',

   value: '11110106000063474118'

   },

   {

   text: '蒲安里第二社区',

   value: '11110106000063474119'

   },

   {

   text: '蒲黄榆第一社区',

   value: '11110106000063474120'

   },

   {

   text: '蒲黄榆第二社区',

   value: '11110106000063474121'

   },

   {

   text: '蒲黄榆第三社区',

   value: '11110106000063474122'

   },

   {

   text: '四方景园一社区',

   value: '11110106000063474123'

   },

   {

   text: '宋家庄社区',

   value: '11110106000063474124'

   },

   {

   text: '宋庄路第一社区',

   value: '11110106000063474125'

   }

   ]

   },

   {

   text: '丰台区方庄地区',

   value: '110106013000',

   children: [

   {

   text: '全部社区',

   value: '110106013000'

   },

   {

   text: '芳星园二区社区',

   value: '11110106000063415X01'

   },

   {

   text: '芳星园三区社区服务站',

   value: '11110106000063415X02'

   },

   {

   text: '芳城东里社区',

   value: '11110106000063415X03'

   },

   {

   text: '紫芳园社区',

   value: '11110106000063415X04'

   },

   {

   text: '紫芳南里社区',

   value: '11110106000063415X05'

   },

   {

   text: '芳古园一区第一社区',

   value: '11110106000063415X06'

   },

   {

   text: '芳古园一区第二社区',

   value: '11110106000063415X07'

   },

   {

   text: '芳古园二区社区',

   value: '11110106000063415X08'

   },

   {

   text: '芳城园一区社区',

   value: '11110106000063415X09'

   },

   {

   text: '芳城园二区社区',

   value: '11110106000063415X10'

   },

   {

   text: '芳城园三区社区',

   value: '11110106000063415X11'

   },

   {

   text: '芳群园一区社区服务站',

   value: '11110106000063415X12'

   },

   {

   text: '芳群园二区社区',

   value: '11110106000063415X13'

   },

   {

   text: '芳群园三区社区',

   value: '11110106000063415X14'

   },

   {

   text: '芳群园四区社区服务站',

   value: '11110106000063415X15'

   },

   {

   text: '芳星园一区社区',

   value: '11110106000063415X16'

   }

   ]

   },

   {

   text: '丰台区丰台街道',

   value: '110106009000',

   children: [

   {

   text: '全部社区',

   value: '110106009000'

   },

   {

   text: '彩虹北社区',

   value: '11110106000063378P01'

   },

   {

   text: '东安街19号院社区',

   value: '11110106000063378P02'

   },

   {

   text: '63号院社区',

   value: '11110106000063378P03'

   },

   {

   text: '北大地西区社区',

   value: '11110106000063378P04'

   },

   {

   text: '北大地16号院社区服务站',

   value: '11110106000063378P05'

   },

   {

   text: '东安街社区',

   value: '11110106000063378P06'

   },

   {

   text: '东安街头条社区',

   value: '11110106000063378P07'

   },

   {

   text: '北大街北里社区',

   value: '11110106000063378P08'

   },

   {

   text: '东大街西里社区',

   value: '11110106000063378P09'

   },

   {

   text: '北大街社区',

   value: '11110106000063378P10'

   },

   {

   text: '东幸福街社区',

   value: '11110106000063378P11'

   },

   {

   text: '永善社区',

   value: '11110106000063378P12'

   },

   {

   text: '正阳北里社区',

   value: '11110106000063378P13'

   },

   {

   text: '东大街东里社区',

   value: '11110106000063378P14'

   },

   {

   text: '东大街社区',

   value: '11110106000063378P15'

   },

   {

   text: '前泥洼社区',

   value: '11110106000063378P16'

   },

   {

   text: '南开西里社区',

   value: '11110106000063378P17'

   },

   {

   text: '向阳社区',

   value: '11110106000063378P18'

   },

   {

   text: '建国街社区',

   value: '11110106000063378P19'

   },

   {

   text: '新华街北',

   value: '11110106000063378P20'

   },

   {

   text: '新华街南',

   value: '11110106000063378P21'

   },

   {

   text: '程庄路16号院社区',

   value: '11110106000063378P22'

   },

   {

   text: '丰益花园社区',

   value: '11110106000063378P23'

   },

   {

   text: '丰管路社区服务站',

   value: '11110106000063378P24'

   },

   {

   text: '彩虹南社区',

   value: '11110106000063378P25'

   }

   ]

   },

   {

   text: '丰台区和义街道',

   value: '110106016000',

   children: [

   {

   text: '全部社区',

   value: '110106016000'

   },

   {

   text: '和义东里第一社区',

   value: '11110106000063650X01'

   },

   {

   text: '和义东里第二社区',

   value: '11110106000063650X02'

   },

   {

   text: '和义东里第三社区',

   value: '11110106000063650X03'

   },

   {

   text: '南苑北里第一社区',

   value: '11110106000063650X04'

   },

   {

   text: '南苑北里第二社区',

   value: '11110106000063650X05'

   },

   {

   text: '和义西里第一社区',

   value: '11110106000063650X06'

   },

   {

   text: '和义西里第二社区',

   value: '11110106000063650X07'

   },

   {

   text: '和义西里第三社区服务站',

   value: '11110106000063650X08'

   },

   {

   text: '久敬庄社区',

   value: '11110106000063650X09'

   }

   ]

   }

   ]

   },

   {

   text: '石景山区',

   value: '110107000000',

   children: [

   {

   text: '全部街道',

   value: '110107000000',

   children: [

   {

   text: '全部社区',

   value: '110107000000'

   }

   ]

   },

   {

   text: '石景山区八宝山街道',

   value: '110107001000',

   children: [

   {

   text: '全部社区',

   value: '110107001000'

   }

   ]

   },

   {

   text: '石景山区古城街道',

   value: '110107004000',

   children: [

   {

   text: '全部社区',

   value: '110107004000'

   }

   ]

   },

   {

   text: '石景山区广宁街道',

   value: '110107009000',

   children: [

   {

   text: '全部社区',

   value: '110107009000'

   }

   ]

   },

   {

   text: '石景山区八角街道',

   value: '110107003000',

   children: [

   {

   text: '全部社区',

   value: '110107003000'

   }

   ]

   },

   {

   text: '石景山区老山街道',

   value: '110107002000',

   children: [

   {

   text: '全部社区',

   value: '110107002000'

   }

   ]

   },

   {

   text: '石景山区苹果园街道',

   value: '110107005000',

   children: [

   {

   text: '全部社区',

   value: '110107005000'

   }

   ]

   },

   {

   text: '石景山区鲁谷街道',

   value: '110107011000',

   children: [

   {

   text: '全部社区',

   value: '110107011000'

   }

   ]

   },

   {

   text: '石景山区人民政府金顶街街道办事处',

   value: '110107006000',

   children: [

   {

   text: '全部社区',

   value: '110107006000'

   }

   ]

   },

   {

   text: '石景山区五里坨街道',

   value: '110107010000',

   children: [

   {

   text: '全部社区',

   value: '110107010000'

   }

   ]

   }

   ]

   },

   {

   text: '海淀区',

   value: '110108000000',

   children: [

   {

   text: '全部街道',

   value: '110108000000',

   children: [

   {

   text: '全部社区',

   value: '110108000000'

   }

   ]

   },

   {

   text: '海淀区甘家口街道',

   value: '110108004000',

   children: [

   {

   text: '全部社区',

   value: '110108004000'

   }

   ]

   },

   {

   text: '海淀区中关村街道',

   value: '110108011000',

   children: [

   {

   text: '全部社区',

   value: '110108011000'

   }

   ]

   },

   {

   text: '海淀区八里庄街道',

   value: '110108005000',

   children: [

   {

   text: '全部社区',

   value: '110108005000'

   }

   ]

   },

   {

   text: '海淀区清河街道',

   value: '110108017000',

   children: [

   {

   text: '全部社区',

   value: '110108017000'

   }

   ]

   },

   {

   text: '海淀区紫竹院街道',

   value: '110108006000',

   children: [

   {

   text: '全部社区',

   value: '110108006000'

   }

   ]

   },

   {

   text: '海淀区花园路街道',

   value: '110108018000',

   children: [

   {

   text: '全部社区',

   value: '110108018000'

   }

   ]

   },

   {

   text: '海淀区马连洼街道',

   value: '110108020000',

   children: [

   {

   text: '全部社区',

   value: '110108020000'

   }

   ]

   }

   ]

   }

  ];

  // 级联筛选内容数据

  export const cascadeSelections = [

   {

   text: '两列',

   value: 'all',

   type: 'cascade',

   options: cascadeFirstOptions

   },

   {

   text: '等2秒',

   value: null,

   type: 'cascade',

   options: cascadeSecondAndThirdOptions

   },

   {

   text: '默认带入',

   value: '11110101000033398111',

   type: 'cascade',

   options: cascadeSecondAndThirdOptions

   }

  ];

  // 单列筛选数组带下拉数据

  export const singleSelections = [

   {

   text: '默认选项',

   value: 'all',

   options: [

   {

   text: '全部地区',

   value: 'all'

   },

   {

   text: '北京市',

   value: 'bi'

   },

   {

   text: '天津市',

   value: 'tj'

   },

   {

   text: '河北省',

   value: 'hb'

   }

   ]

   },

   {

   text: '2020线上调剂',

   value: '2020',

   highlight: false,

   options: [

   {

   text: '2020第二批调剂',

   value: '2020'

   }

   ]

   },

   {

   text: '星级',

   value: 'optAll',

   options: [

   {

   text: '全部星级',

   value: 'optAll'

   },

   {

   text: '五星级',

   value: 'opt2'

   },

   {

   text: '四星级',

   value: 'opt3'

   },

   {

   text: '五星级',

   value: 'opt4'

   },

   {

   text: '六星级',

   value: 'opt5'

   },

   {

   text: '七星级',

   value: 'opt6'

   },

   {

   text: '八星级',

   value: 'opt7'

   },

   {

   text: '九星级',

   value: 'opt8'

   },

   {

   text: '十星级',

   value: 'opt9'

   }

   ]

   }

  ];

  // 多选筛选组件数据

  export const checkboxSelections = [

   {

   text: '初始有值',

   type: 'checkbox-group',

   value: [1],

   column: 3,

   objectKey: 'name',

   itemStyle: {

   width: upx2rpx(346) + 'rpx'

   },

   options: [

   {

   name: '视力',

   value: 1

   },

   {

   name: '听力',

   disabled: true,

   value: 2,

   desc: '禁用不可点'

   },

   {

   name: '语音',

   value: 3

   },

   {

   name: '肢体',

   disabled: true,

   value: 4,

   desc: '禁用不可点'

   },

   {

   name: '智力',

   value: 5

   },

   {

   name: '精神',

   value: 6

   }

   ]

   },

   {

   text: '三列',

   type: 'checkbox-group',

   column: 3,

   objectKey: 'name',

   itemStyle: {

   width: upx2rpx(346) + 'rpx'

   },

   options: [

   {

   name: '笔记本',

   value: 1

   },

   {

   name: '台式机',

   value: 2

   },

   {

   name: '打印机',

   value: 3

   },

   {

   name: '金士顿钛合金内存',

   value: 4

   },

   {

   name: '技嘉游戏主板',

   value: 5

   },

   {

   name: '电源',

   value: 6

   },

   {

   name: 'CPU',

   value: 7

   },

   {

   name: '键盘',

   value: 8

   },

   {

   name: '显示器',

   value: 9

   },

   {

   name: '主机',

   value: 10

   },

   {

   name: '移动键盘',

   value: 11

   },

   {

   name: '风扇',

   value: 12

   }

   ]

   },

   {

   text: '两列',

   type: 'checkbox-group',

   column: 2,

   objectKey: 'name',

   itemStyle: {

   width: upx2rpx(346) + 'rpx'

   },

   options: [

   {

   name: '笔记本',

   value: 1

   },

   {

   name: '台式机',

   value: 2

   },

   {

   name: '特价优惠-金士顿钛合金内存条',

   value: 3

   },

   {

   name: '技嘉游戏主板',

   value: 4

   },

   {

   name: 'CPU',

   value: 5

   },

   {

   name: '键盘',

   value: 6

   },

   {

   name: '主机',

   value: 7

   },

   {

   name: '移动硬盘',

   value: 8

   },

   {

   name: '鼠标',

   value: 9

   },

   {

   name: '硬盘',

   value: 10

   }

   ]

   }

  ];

  // 回填筛选组件数据

  export const fillBackSelections = [

   {

   text: '默认选项',

   value: 'all',

   options: [

   {

   text: '全部地区',

   value: 'all'

   },

   {

   text: '北京市',

   value: 'bi'

   },

   {

   text: '天津市',

   value: 'tj'

   },

   {

   text: '上海市',

   value: 'sh'

   }

   ]

   },

   {

   text: '星级',

   value: 'opt4',

   options: [

   {

   text: '全部星级',

   value: 'optAll'

   },

   {

   text: '五星级',

   value: 'opt2'

   },

   {

   text: '四星级',

   value: 'opt3'

   },

   {

   text: '五星级',

   value: 'opt4'

   },

   {

   text: '六星级',

   value: 'opt5'

   },

   {

   text: '七星级',

   value: 'opt6'

   },

   {

   text: '八星级',

   value: 'opt7'

   },

   {

   text: '九星级',

   value: 'opt8'

   },

   {

   text: '十星级',

   value: 'opt9'

   }

   ]

   },

   {

   text: '默认带入',

   value: '11110101000033398111',

   type: 'cascade',

   options: cascadeSecondAndThirdOptions

   }

  ];

  // 自定义筛选面板

  export const customSelections = [

   {

   text: '自定义',

   slot: 'custom'

   }

  ];

  export const customData = {

   card: {

   type: 'checkbox-group',

   label: '品牌',

   column: 3,

   itemStyle: {

   width: upx2rpx(346) + 'rpx'

   },

   spread: true,

   options: [

   {

   name: '苹果',

   value: 1

   },

   {

   name: '联想',

   value: 2

   },

   {

   name: '惠普',

   value: 3

   }

   ]

   },

   type: {

   type: 'checkbox-group',

   label: '类型（默认显示9个选项卡，超出后折叠显示）',

   column: 3,

   value: [1],

   itemStyle: {

   width: upx2rpx(346) + 'rpx'

   },

   showIcon: true,

   spread: false,

   options: [

   {

   name: '金士顿钛合金内存',

   value: 1

   },

   {

   name: '技嘉游戏主板',

   value: 2

   },

   {

   name: '电源',

   value: 3

   },

   {

   name: 'CPU',

   value: 4

   },

   {

   name: '键盘',

   value: 5

   },

   {

   name: '显示器',

   value: 6

   },

   {

   name: '主机',

   value: 7

   },

   {

   name: '移动键盘',

   value: 8

   },

   {

   name: '风扇',

   value: 9

   },

   {

   name: '鼠标',

   value: 10

   },

   {

   name: '硬盘',

   value: 11

   },

   {

   name: '内存条哦',

   value: 12

   }

   ]

   },

   activity: {

   type: 'checkbox-group',

   label: '活动',

   column: 3,

   value: [1],

   spread: true,

   itemStyle: {

   width: upx2rpx(346) + 'rpx'

   },

   options: [

   {

   name: '特价优惠-笔记本专用内存条',

   value: 1

   },

   {

   name: '特价优惠-第10代游戏专用CPU',

   value: 2

   },

   {

   name: '特价优惠-台式内存条',

   value: 3

   }

   ]

   }

  };

九八云百度小程序教程：filter 筛选

filter 筛选

属性说明

selections 中的 type 有效值

示例

代码示例

数据示例

相关推荐

评论抢沙发

攻防案列

filter 筛选

属性说明

selections 中的 type 有效值

示例

代码示例

数据示例

相关推荐

评论 抢沙发

攻防案列

评论抢沙发