mpvue小程序vant组件多选

小程序开发常用的组件，多选
我用的是vant组件，但是多选没有我想要的，于是自己写了个。结合van-checkbox和van-popup和can-cell-group还有van-cell写了一个按钮多选式的
html代码

<van-field v-model.trim="recordList.parkingCategoryNameList" required label="停车场类型：" placeholder="请选择停车场类型" readonly is-link="true" @click="showCategoryPopups"/>
        <van-popup
          :show="showCategoryPopup"
          closeable
          position="bottom"
          custom-style="height: 60%;padding:40rpx 20rpx;"
          @close="onCloseCategoryPopup"
        >
          <van-checkbox-group v-model="result" @change="onChangeCategoryList" class="checkbox-info">
            <van-cell-group>
              <van-cell v-for="(item,index) in parkingCategoryArr" :key="index" :title="item.name" :label="item.code" clickable
                        data-index="index" title-width="94%" center>
                <!--                所以在此处赋值的一定要支出对象的具体ID值“itme.id”-->
                <van-checkbox :name="item.id" data-data="item"></van-checkbox>
              </van-cell>
            </van-cell-group>
          </van-checkbox-group>
          <van-button type="info" color="#4bbcff"  class="checkBtn" block @click="onCategoryConfirm">确定</van-button>
        </van-popup>

data数据：

data(){
	return{
		recordList:{
			parkingCategoryList:[],
        	parkingCategoryNameList:[],
		},
		result:[],//用来接收选中后的数据
		parkingCategoryArr:[
        {id:1,name:'地面'},
        {id:2,name:'地下'},
        {id:3,name:'机械'},
        {id:4,name:'立体'},
        {id:5,name:'其他'},
      ],
      showParkingCategory:false,//类型
	}
}

js代码：

//打开弹出层,停车场类型选择
    showCategoryPopups(){
      this.showCategoryPopup = true;
    },
    onCloseCategoryPopup(){
      this.showCategoryPopup = false;
      // this.result = [];
    },
    onChangeCategoryList: function (event) {
      // console.log(event)
      var that = this;
      var array = event.mp.detail;
      // that.setData({
      //   result: array,
      // })
      that.result = array;
      console.log(that.result)
    },
    //确定选中
    onCategoryConfirm(){
      this.showCategoryPopup = false;
      console.log(this.result)
      var that = this;
      that.recordList.parkingCategoryList = that.result;
      that.recordList.parkingCategoryNameList = [];
      that.parkingCategoryArr.forEach(function(i){
          that.result.forEach(function(j){
            if(j == i.id){
              that.recordList.parkingCategoryNameList.push(i.name)
            }
          })
        }
      )
    },

页面效果是这样的：

暂时没做单击整行的选中状态，有需要补充的，欢迎下方评论区骚扰！