小程序中方格形式多选框的实现

"usingComponents": {
    "van-field": "@vant/weapp/field",
    "van-cell": "@vant/weapp/cell",
    "van-cell-group": "@vant/weapp/cell-group",
    "van-picker": "@vant/weapp/picker",
    "van-stepper": "@vant/weapp/stepper",
    "van-button": "@vant/weapp/button",
    "van-toast": "@vant/weapp/toast",
    "van-dialog": "@vant/weapp/dialog/index",
    "van-datetime-picker": "@vant/weapp/datetime-picker/index",
    "van-popup": "@vant/weapp/popup/index",
    "van-checkbox": "@vant/weapp/checkbox/index",
    "van-checkbox-group": "@vant/weapp/checkbox-group/index",
    "van-collapse": "@vant/weapp/collapse/index",
    "van-collapse-item": "@vant/weapp/collapse-item/index",
    "van-calendar": "@vant/weapp/calendar/index",
    "van-grid": "@vant/weapp/grid/index",
    "van-grid-item": "@vant/weapp/grid-item/index"
  }

<!-- 工序选择 -->
    <van-collapse value="{{ activeNames }}" bind:change="onChange1">
      <van-collapse-item name="1" border="{{false}}">
        <view class="title" slot="title">工序</view>
        <van-grid
        column-num="3" 
        square>
          <van-grid-item use-slot wx:for="{{ arrayProcedure }}">
            <van-checkbox-group value="{{ result }}" bind:change="onChange">
              <van-checkbox
                catch:tap="noop"
                checked-color="#00B26B" 
                shape="square"
                class="checkboxes-{{ index }}"
                name="{{ item.id }}"
              >{{item.name}}
              </van-checkbox>
            </van-checkbox-group>
          </van-grid-item>
        </van-grid>
      </van-collapse-item>
    </van-collapse>

onChange1(event) {
    this.setData({
      activeNames: event.detail,
    });
  },