实现效果
无筛选,如有需要可参照单选组件中的方法 .json
文件配置"component": true,
columns
需要处理成含dictLabel
和dictValue
字段,我是这样处理的:
let list = arr.map(r => { return { ...r, dictValue : r.xxxId, dictLabel : r.xxxName}
} )
实现代码
组件代码
< van-popup show = " {{ show }}" position = " bottom" round custom-style = " height:{{height}}%;z-index:2000;" class = " relative" > < view class = " pd-30 flex mb-30 fixed pickerTop w100 bg-white" > < view class = " gray-3 fs14" bindtap = " close" > 取消</ view> < view class = " pickerText bold" > {{title}}</ view> < view class = " fs14" style = " color: { { colorStyle} } ; " bindtap = " getData1" > 确认</ view> </ view> < view class = " mb-30 plr-30 mulPicker" > < van-checkbox-group value = " {{ valueList }}" bind: change= " onChange" > < van-cell-group> < van-cell wx: for= " {{ columns }}" wx: key= " index" value-class = " value-class" clickable data-index = " {{ index }}" bind: click= " toggle" > < van-checkbox catch: tap= " noop" class = " checkboxes-{{ index }}" shape = " square" checked-color = " {{colorStyle}}" name = " {{ item.dictValue }}" > {{item.dictLabel}}</ van-checkbox> </ van-cell> </ van-cell-group> </ van-checkbox-group> </ view>
</ van-popup>
import { formatTime, formatTime1 } from '../../../../utils/index' Component ( { options: { addGlobalClass: true , } , properties: { show: Boolean, height: { type: Number, value: 80 } , title: { type: String, value: '请选择' } , columns: Array, valueList: Array, colorStyle: { type: String, value: "#3772E9" } , } , data: { } , methods: { getData1 ( e ) { this . triggerEvent ( "getData1" , this . data. valueList) ; this . close ( ) ; } , onChange ( e ) { this . setData ( { valueList: e. detail, } ) ; } , toggle ( event ) { const { index } = event. currentTarget. dataset; const checkbox = this . selectComponent ( ` .checkboxes- ${ index} ` ) ; checkbox. toggle ( ) ; } , noop ( ) { } , close ( ) { this . triggerEvent ( "close" ) ; } , } ,
} )
.pickerText { font-size : 16px;
} .pickerTop { border-radius : 50rpx 50rpx 0 0; z-index : 2000;
} .mulPicker { margin-top : 120rpx;
} .value-class { flex : none !important ;
}
页面使用
< w-mulpicker show = " {{show}}" columns = " {{columns}}" title = " {{title}}" bindgetData1 = " getData1" colorStyle = " {{colorStyle}}" bindclose = " close" />
getData1 ( e ) { console. log ( e. detail) ; this . close ( ) ; } , close ( ) { this . setData ( { show: false , } ) } ,