新聞中心
- filter 篩選
- 屬性說(shuō)明
- selections 中的 type 有效值
- 示例
- 代碼示例
- 數(shù)據(jù)示例
- 屬性說(shuō)明
filter 篩選
解釋:篩選,由篩選頭部(filter-header)以及篩選面板(filter-body)組成,其中篩選面板支持單列篩選、級(jí)聯(lián)篩選、多項(xiàng)選擇篩選以及自定義篩選。

欽南網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)建站,欽南網(wǎng)站設(shè)計(jì)制作,有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為欽南近千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站建設(shè)要多少錢(qián),請(qǐng)找那個(gè)售后服務(wù)好的欽南做網(wǎng)站的公司定做!
屬性說(shuō)明
| 屬性名 | 類型 | 必填 | 默認(rèn)值 | 說(shuō)明 |
|---|---|---|---|---|
filterId | String | 是 | 篩選組件的唯一標(biāo)示 | |
selections | String | 是 | 篩選項(xiàng)內(nèi)容數(shù)組,數(shù)組格式為: | |
value | String/Number/Array | 否 | 選中項(xiàng)的值 | |
border | Boolean | 否 | true | 篩選器頭部(filter-header)是否帶有下邊線 |
fontColor | String | 否 | #000 | 篩選器頭部(filter-header)默認(rèn)狀態(tài)下的文字顏色 |
iconColor | String | 否 | #000 | 篩選器頭部(filter-header)默認(rèn)狀態(tài)下的 icon 顏色 |
activeColor | String | 否 | #2772fb | 篩選器選中時(shí)篩選頭部(filter-header)以及篩選面板(filter-body)icon 顏色 |
disColor | String | 否 | #666 | 篩選器選中時(shí)篩選頭部(filter-header)配置不高亮(highlight: false)時(shí)的文字和 icon 顏色 |
filter-header-class | String | 否 | 篩選組件頭部的外部樣式類,可用于修改整個(gè)頭部的最外層樣式 | |
filter-btn-class | String | 否 | 篩選組件頭部的外部樣式類,可用于修改某個(gè)頭部按鈕的樣式 | |
filter-btn-text-class | String | 否 | 篩選組件頭部的外部樣式類,可用于修改某個(gè)頭部的文字樣式 | |
filter-body-class | String | 否 | 篩選組件展開(kāi)時(shí)篩選面板(filter-body)外部樣式類,可用于修改篩選面板的最外層樣式 | |
bindselect | EventHandle | 否 | 更改篩選面板中內(nèi)容時(shí)觸發(fā),可用于獲取組件選中的內(nèi)容 | |
bindexpand | EventHandle | 否 | 點(diǎn)擊篩選頭部或者篩選面板關(guān)閉時(shí)觸發(fā),可用于獲取篩選面板收起 / 展開(kāi)狀態(tài) |
selections 中的 type 有效值
| 值 | 說(shuō)明 |
|---|---|
| single | 默認(rèn)值,篩選組件展開(kāi)后為單列面板 |
| cascade | 篩選組件展開(kāi)后為篩選面板為級(jí)聯(lián)面板,tips:篩選組件目前最多支持 3 級(jí) options 格式為:[{ ??text: ‘’, ??value: ‘’, ??children: [{ ???text: ‘’, ???value: ‘’ ??}] }] |
| checkbox-group | 篩選組件展開(kāi)后為多選面板。需要修改多選面板樣式,可以在 selections 中增加 column、itemStyle 等配置,可參考 checkbox-group 組件 |
| custom | 篩選組件展開(kāi)后為自定義面板。如果你想要自定義篩選面板,則 selections 需要增加 slot ,如:slot=custom |
type 為 single 時(shí)的樣式
| 屬性名 | 類型 | 必填 | 默認(rèn)值 | 說(shuō)明 |
|---|---|---|---|---|
| filter-singlelist-class | String | 否 | 單列篩選外部樣式類,可用于修改單列篩選組件最外層樣式 | |
| filter-singlelist-item-class | String | 否 | 單列篩選外部樣式類,可用于修改單列篩選組件中每一項(xiàng)展開(kāi)元素的樣式 | |
| filter-singlelist-item-text-class | String | 否 | 單列篩選外部樣式類,可用于修改單列篩選組件中每一項(xiàng)展開(kāi)元素的文字樣式 |
type 為 cascade 時(shí)的樣式
| 屬性名 | 類型 | 必填 | 默認(rèn)值 | 說(shuō)明 |
|---|---|---|---|---|
| filter-cascade-class | String | 否 | 級(jí)聯(lián)篩選外部樣式類,可用戶修改級(jí)聯(lián)篩選組件最外層樣式 | |
| filter-cascade-column-class | String | 否 | 級(jí)聯(lián)篩選組件外部樣式類,可用戶修改組件展開(kāi)面板中,某一列的樣式 | |
| filter-cascade-column-item-class | String | 否 | 級(jí)聯(lián)篩選組件外部樣式類,可用戶修改組件展開(kāi)面板中,某一列中某一項(xiàng)的樣式 | |
| filter-cascade-column-item-text-class | String | 否 | 級(jí)聯(lián)篩選組件外部樣式類,可用戶修改組件展開(kāi)面板中,某一列中某一項(xiàng)的文字的樣式 |
type 為 checkbox-group 時(shí)的樣式
| 屬性名 | 類型 | 必填 | 默認(rèn)值 | 說(shuō)明 |
|---|---|---|---|---|
| activeTextColor | String | 否 | #2772fb | 篩選面板(filter-body)為多項(xiàng)選擇篩選時(shí)選中時(shí)的文字顏色 |
| activeIconColor | String | 否 | #2772fb | 篩選面板(filter-body)為多項(xiàng)選擇篩選時(shí)選中時(shí)的 icon 顏色 |
| activeBgColor | String | 否 | #2772fb | 篩選面板(filter-body)為多項(xiàng)選擇篩選時(shí)選中時(shí)的背景顏色 |
| filter-checkbox-group-class | String | 否 | 多項(xiàng)篩選組件外部樣式類,可用于修改組件最外層樣式 | |
| checkbox-group-class | String | 否 | 多項(xiàng)組件的外部樣式類,可用于修改組件展開(kāi)的多項(xiàng)選擇面板樣式 |
示例
跳轉(zhuǎn)編輯工具
在開(kāi)發(fā)者工具中打開(kāi)
在 WEB IDE 中打開(kāi)
掃碼體驗(yàn)
代碼示例
請(qǐng)使用百度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-elseclass="{{item.class || 'filter-body'}}"checkbox-group-class="filter-checkbox-group"filter-id="{{index + 6}}"selections="{{item.selections}}"/>將數(shù)據(jù)“上海市”回填到篩選器一中,數(shù)據(jù)“東廠社區(qū)”回填到篩選器三中
數(shù)據(jù)示例
- JS
import {upx2rpx} from '@smt-ui/component/src/common/utils/px';// 篩選頭部數(shù)據(jù)export const headerArray = [{title: '單個(gè)篩選',selections: [{text: '篩選器一',value: '1'}]},{title: '兩個(gè)篩選',selections: [{text: '篩選器一',value: '1'},{text: '篩選器二',value: '2'}]},{title: '三個(gè)篩選',selections: [{text: '篩選器一',value: '1'},{text: '篩選器二',value: '2'},{text: '篩選器三',value: '3'}]},{title: '四個(gè)篩選',selections: [{text: '篩選器超過(guò)四個(gè)字打點(diǎn)',value: '1'},{text: '篩選器二',value: '2'},{text: '篩選器三',value: '3'},{text: '篩選器四',value: '4'}]},{title: '自定義樣式',fontColor: '#2772fb',iconColor: '#2772fb',selections: [{text: '最多支持8個(gè)字超過(guò)打點(diǎn)',textWidth: 386}]}];// 級(jí)聯(lián)篩選第一列數(shù)據(jù)const cascadeFirstOptions = [{text: '全部所在地區(qū)',value: 'all',children: [{value: 'all',text: '全部所在地區(qū)'}]},{value: 'bj',text: '北京市',children: [{value: 3848,text: '全部北京市'},{value: 3851,text: '東城區(qū)'},{value: 3852,text: '西城區(qū)'},{value: 3853,text: '海淀區(qū)'},{value: 3854,text: '朝陽(yáng)區(qū)'},{value: 3855,text: '豐臺(tái)區(qū)'},{value: 3856,text: '石景山區(qū)'},{value: 3857,text: '通州區(qū)'},{value: 3858,text: '順義區(qū)'},{value: 3859,text: '房山區(qū)'},{value: 3860,text: '大興區(qū)'},{value: 3861,text: '昌平區(qū)'},{value: 3862,text: '懷柔區(qū)'},{value: 3863,text: '平谷區(qū)'},{value: 3864,text: '門(mén)頭溝區(qū)'},{value: 3865,text: '密云區(qū)'},{value: 3866,text: '延慶區(qū)'}]},{value: 'tj',text: '天津市',children: [{value: 3849,text: '全部天津市'},{value: 3879,text: '和平區(qū)'},{value: 3880,text: '河?xùn)|區(qū)'},{value: 3881,text: '河西區(qū)'},{value: 3882,text: '南開(kāi)區(qū)'},{value: 3883,text: '河北區(qū)'},{value: 3884,text: '紅橋區(qū)'},{value: 3885,text: '塘沽區(qū)'},{value: 3886,text: '漢沽區(qū)'},{value: 3887,text: '大港區(qū)'},{value: 3888,text: '東麗區(qū)'},{value: 3889,text: '西青區(qū)'},{value: 3890,text: '津南區(qū)'},{value: 3891,text: '北辰區(qū)'},{value: 3892,text: '武清區(qū)'},{value: 3893,text: '寶坻區(qū)'},{value: 3894,text: '寧河縣'},{value: 3895,text: '靜海區(qū)'},{value: 3896,text: '薊州區(qū)'},{value: 3897,text: '濱海新區(qū)'}]},{value: 'hb',text: '河北省',children: [{value: 3850,text: '全部河北省'},{value: 3867,text: '石家莊市'},{value: 3868,text: '唐山市'},{value: 3869,text: '秦皇島市'},{value: 3870,text: '邯鄲市'},{value: 3871,text: '邢臺(tái)市'},{value: 3872,text: '保定市'},{value: 3873,text: '張家口市'},{value: 3874,text: '承德市'},{value: 3875,text: '滄州市'},{value: 3876,text: '廊坊市'},{value: 3877,text: '衡水市'},{value: 3878,text: '涿州市'}]}];// 級(jí)聯(lián)篩選第二和第三列數(shù)據(jù)export const cascadeSecondAndThirdOptions = [{text: '東城區(qū)',value: '110101000000',children: [{text: '全部街道',value: '110101000000',children: [{text: '全部社區(qū)',value: '110101000000'}]},{text: '東城區(qū)安定門(mén)街道',value: '110101004000',children: [{text: '全部社區(qū)',value: '110101004000'}]},{text: '東城區(qū)建國(guó)門(mén)街道',value: '110101008000',children: [{text: '全部社區(qū)',value: '110101008000'},{text: '崇內(nèi)社區(qū)',value: '11110101000033398110'},{text: '東總布社區(qū)',value: '11110101000033398111'},{text: '金寶街北社區(qū)',value: '11110101000033398103'},{text: '大雅寶社區(qū)',value: '11110101000033398104'},{text: '趙家樓社區(qū)',value: '11110101000033398105'},{text: '站東社區(qū)',value: '11110101000033398106'}]},{text: '東城區(qū)朝陽(yáng)門(mén)街道',value: '110101007000',children: [{text: '全部社區(qū)',value: '110101007000'}]},{text: '東城區(qū)東直門(mén)街道',value: '110101009000',children: [{text: '全部社區(qū)',value: '110101009000'}]},{text: '東城區(qū)東華門(mén)街道',value: '110101001000',children: [{text: '全部社區(qū)',value: '110101001000'},{text: '正義路社區(qū)',value: '11110101000033443B01'},{text: '臺(tái)基廠社區(qū)',value: '11110101000033443B08'},{text: '南池子社區(qū)',value: '11110101000033443B09'},{text: '智德社區(qū)',value: '11110101000033443B11'},{text: '銀閘社區(qū)',value: '11110101000033443B13'},{text: '王府井社區(qū)',value: '11110101000033443B19'},{text: '東廠社區(qū)',value: '11110101000033443B20'}]},{text: '東城區(qū)和平里街道',value: '110101010000',children: [{text: '全部社區(qū)',value: '110101010000'}]},{text: '東城區(qū)北新橋街道',value: '110101005000',children: [{text: '全部社區(qū)',value: '110101005000'},{text: '北官?gòu)d社區(qū)',value: '11110101000033478X01'},{text: '民安社區(qū)',value: '11110101000033478X02'},{text: '北新倉(cāng)社區(qū)',value: '11110101000033478X03'},{text: '海運(yùn)倉(cāng)社區(qū)',value: '11110101000033478X04'}]}]},{text: '西城區(qū)',value: '110102000000',children: [{text: '全部街道',value: '110102000000',children: [{text: '全部社區(qū)',value: '110102000000'}]},{text: '西城區(qū)白紙坊街道',value: '110102019000',children: [{text: '全部社區(qū)',value: '110102019000'}]},{text: '西城區(qū)椿樹(shù)街道',value: '110102015000',children: [{text: '全部社區(qū)',value: '110102015000'}]},{text: '西城區(qū)大柵欄街道',value: '110102013000',children: [{text: '全部社區(qū)',value: '110102013000'}]},{text: '西城區(qū)德勝街道',value: '110102010000',children: [{text: '全部社區(qū)',value: '110102010000'},{text: '石油社區(qū)',value: '1111010200003821X001'},{text: '水電社區(qū)',value: '1111010200003821X002'},{text: '煤炭社區(qū)',value: '1111010200003821X003'},{text: '安德路南社區(qū)',value: '1111010200003821X004'},{text: '安德路北社區(qū)',value: '1111010200003821X005'
當(dāng)前題目:創(chuàng)新互聯(lián)百度小程序教程:filter篩選
文章轉(zhuǎn)載:http://www.dlmjj.cn/article/djspphp.html


咨詢
建站咨詢
