简单的实现全选反选

全选反选的应用挺广泛的，之前用的vant,现在自己写了一个;

但是还是用的van-checkbox这个组件，他的v-model绑定很好用。

全选的值先定义为false,单选的值用$set写入一个状态，定义为false， 点击全选的时候因为是用的van-checkbox，所以他的值发生了变化，直接遍历子状态的值改为和全选的状态一样，在点击单选的时候也是遍历每个单选的值，然后如果都是/true则把全选的值也改为true；

   <div class="select-all">
                <!-- 全选 -->
                <van-checkbox checked-color="#F5B710" icon-size="16px" v-model="selectAll" @click="handleSelectedAll">
                  <van-image width="20" height="20" round :src="orderDetail.shopLogoUrl" />
                  &nbsp;
                  <p>{{ orderDetail.shopAlias }}</p>
                </van-checkbox>
              </div>

             
                <div class="good-item" v-for="item in orderDetail.orderItemList" :key="item.id">
                 
                    <!-- 单选 -->
                    <van-checkbox
                      @click="handleCheckboxChanged(item)"
                      checked-color="#F5B710"
                      icon-size="16px"
                      v-model="item.isSelected"
                    ></van-checkbox>
                    <img class="good-image" :src="item.mainPicUrl" />
                    <div class="good-description">
                      <span class="spu">{{ item.spuName }}</span>
                      <span class="skuSpecValues">{{ item.skuSpecValues }}</span>
                    </div>
                  </div>
                <script>
                    data(){
                        return {
                        //全选的绑定值
                               selectAll: false,
                               },
                         methods:{
                                    // 全选
                         handleSelectedAll() {
                              this.orderDetail.orderItemList.forEach(item => {
                                item.isSelected = this.selectAll;
                                     });
                                    },
                          // 单选
                            handleCheckboxChanged(item) {
                       this.selectAll = this.orderDetail.orderItemList.every(item => item.isSelected);
                                    },
}
</script>

在写入key,val的时候发生一个问题很尴尬。

之前没有使用this.$set,直接用的判断，符合条件就直接新加一个属性，这样的话可能会导致underfind,还是使用写入的方法比较靠谱，另外在双重遍历的时候，一定要多用js提供的数组或者对象的方法，避免频繁使用for  each  ,for in。

下面是我遇到的时候的处理方法，可能不是太优，但是够用吧~~~~~~

  const { afterTypeMap = {}} = res.data || {};  //返回的数据

            this.orderDetail.orderItemList.map(item => {

              const arrl = Object.keys(afterTypeMap).filter(it2 => it2 === item.cat3Code);

              if (afterTypeMap[arrl].includes('AFTER_PRICE')) {

                this.$set(item, 'AFTER_PRICE', true);

              } else {

                this.$set(item, 'AFTER_PRICE', false);

              } if (afterTypeMap[arrl].includes('AFTER_NUMBER')) {

                this.$set(item, 'AFTER_NUMBER', true);

              } else {

                this.$set(item, 'AFTER_NUMBER', false);

              }

            });