filter 筛选
解释:筛选,由筛选头部(filter-header)以及筛选面板(filter-body)组成,其中筛选面板支持单列筛选、级联筛选、多项选择筛选以及自定义筛选。
属性说明
属性名 | 类型 | 必填 | 默认值 | 说明 |
---|---|---|---|---|
filterId | String | 是 | 筛选组件的唯一标示 | |
String | 是 | 筛选项内容数组,数组格式为: | ||
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 | 否 | 多项组件的外部样式类,可用于修改组件展开的多项选择面板样式 |
示例
跳转编辑工具
扫码体验
代码示例
请使用百度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>
数据示例
- 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'
},
{
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
}
]
}
};