微信小程序+Vant-自定义选择器组件（多选

wcy01122024-11-27 18:22

实现效果

无筛选，如有需要可参照单选组件中的方法
.json文件配置"component": true,
columns需要处理成含dictLabel和dictValue字段，我是这样处理的：

css 复制代码

let list = arr.map(r => {
  return {
    ...r,
    dictValue: r.xxxId,
    dictLabel: r.xxxName
  }
})

实现代码

组件代码

html 复制代码

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

js 复制代码

import { formatTime, formatTime1 } from '../../../../utils/index'

Component({
  options: {
    addGlobalClass: true,
  },
  /**
   * 组件的属性列表
   */
  properties: {
    show: Boolean,// 是否显示弹出层
    height: {
      type: Number,
      value: 80 // 默认80%，百分比0-100
    },
    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");
    },
  },
})

css 复制代码

.pickerText {
  font-size: 16px;
}

.pickerTop {
  border-radius: 50rpx 50rpx 0 0;
  z-index: 2000;
}

.mulPicker {
  margin-top: 120rpx;
}

.value-class {
  flex: none !important;
}

页面使用

html 复制代码

<w-mulpicker show="{{show}}" columns="{{columns}}" title="{{title}}" bindgetData1="getData1" colorStyle="{{colorStyle}}" bindclose="close" />

js 复制代码

  getData1(e) {
    console.log(e.detail);
    this.close();
  },
  close() {
    this.setData({
      show: false,
    })
  },