实现效果
无筛选,如有需要可参照单选组件中的方法 .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 ,
} )
} ,