创新互联百度小程序教程：filter筛选

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

 
 
 
  
  
  
  
  
   
  
  
   
  
  
   {{item.title}}
  
  
   
  
  
   

  
  
   border="{{false}}"
  
  
   font-color="{{item.fontColor}}"
  
  
   icon-color="{{item.iconColor}}"
  
  
   selections="{{item.selections}}"
  
  
   filter-id="{{index + 1}}"
  
  
   />
  
  
   
  
  
   
  
  
   
  
  
   {{item.title}}
  
  
   
  
  
   

  
  
   data-index="{{index}}"
  
  
   selections="{{item.selections}}"
  
  
   bind:select="selHdl"
  
  
   bind:expand="expandHdl"
  
  
   filter-id="{{index + 6}}"
  
  
   />
  
  
   
  
  
   

  
  
   s-if="item.type === 'custom'"
  
  
   class="{{item.class || 'filter-body'}}"
  
  
   filter-id="{{index + 6}}"
  
  
   selections="{{item.selections}}">
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   

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

  
  
   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"
  
  
   />
  
  
   
  
  
   
  
  
   
  
  
   
  
  
   

  
  
   class="btn reset"
  
  
   type="default"
  
  
   bindtap="resetHdl"
  
  
   disabled="{{resetDisabled}}"
  
  
   >重置
  
  
   

  
  
   class="btn submit"
  
  
   type="primary"
  
  
   bindtap="ensureHdl"
  
  
   >确定
  
  
   
  
  
   
  
  
   
  
  
   

  
  
   s-else
  
  
   class="{{item.class || 'filter-body'}}"
  
  
   checkbox-group-class="filter-checkbox-group"
  
  
   filter-id="{{index + 6}}"
  
  
   selections="{{item.selections}}"
  
  
   />
  
  
   
  
  
   
  
  
   
  
  
   将数据“上海市”回填到筛选器一中，数据“东厂社区”回填到筛选器三中


数据示例

JS

 
 
 
  
  
  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'
              
                本文名称：创新互联百度小程序教程：filter筛选
                

                文章源于：http://www.shufengxianlan.com/qtweb/news21/175221.html
            
            
                网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等
                                
            
                广告
                
            
            
                声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：
                创新互联


        
            猜你还喜欢下面的内容
            
                
                        陌陌技术保障部总监张明强：故障与高可用
                    

                        【北京招聘Linux工程师】（北京linux招聘）
                    

                        全球有哪几个安全系统公司？（圣何塞服务器租用快吗？圣何塞服务器租用有哪家IDC商提供？）
                    

                        Redis实现键的TTL限制（redis设置ttl）
                    

                        阳帝云虚拟主机
                    

                        Linux服务器自带MySQL数据库吗？ (linux服务器自带mysql吗)
                    

                        boardlinux系统仪表盘：一窥技术之美（linux-dash）
                    

                        局域网内模拟互联网网站的方法有哪些
                    

                        韩国云服务器的价格如何？