点击选中，并且标记选中的顺序

demo1实现的效果

demo2实现的效果

思路

demo1的思路：点击勾选，1,2,3,4,然后点击勾选的，取消勾选，1，2，3,；如果是点击2,3就是1,,_,4,再点击未勾选的，就从最小的开始，1,3,2,4

demo2的思路：点击勾选，1,2,3,4,然后点击勾选的4，取消勾选，1，2，3，；如果是点击2，3就让排序更新1，,,2，如果点击1，就更新,1,2,3,再点击未勾选的就是4,1,2,3

区别

两个思路的区别主要还是在修改之后更不更新排序的数字

代码实现

demo1

<view v-for="(box, index) in boxes" :key="index" :class="{ selected: box.selected }"
      @click="selectBox(index)">
    
      <view style="width: 50rpx;height: 50rpx;border: 1px solid black;"> {{ box.number }}</view>
</view>

<style lang="scss">
  .selected {
    background-color: red;
  }
</style>

 //模拟数据
 boxes: [
          {
            selected: false,
            number: 0,
          },
          {
            selected: false,
            number: 0,
          },
          {
            selected: true,
            number: 3,
          },
          {
            selected: false,
            number: 0,
          },
        ],
   selectedBoxes: [],

 selectBox(index) {
      const box = this.boxes[index];
      if (!box.selected) {
        // 选中未选中的盒子
        const nextNumber = this.getNextNumber();
        box.selected = true;
        box.number = nextNumber;
      
      } else {
        // 取消选中已选中的盒子
        box.selected = false;
        box.number = 0;
       
      }
    },
    getNextNumber() {
      // 获取下一个可用的数字
      for (let i = 1; i <= 4; i++) {
      //如果不包含，马上return
        if (!this.boxes.some((box) => box.number === i)) {
          return i;
        }
      }
    },

demo2

<view>
        <view
        style="text-align: center;"
          v-for="(box, index) in optionalProfList"
          :key="box.id"
          @click="selectBox(index)"
          :class="{ selected: box.selected }"
        >
          {{ box.sort }}
        </view>
</view>

<style lang="scss">
  .selected {
    background-color: red;
  }
</style>

 selectBox(index) {
        const box = this.optionalProfList[index];
        const selectedBoxes = this.optionalProfList.filter((item) => item.selected);
    
        if (box.selected) {
          // 如果当前盒子已被选中
          box.selected = false;
          box.sort = 0;
        } else {
          // 如果当前盒子未被选中且已选中的盒子数量小于2
          const nextNumber = this.getNextNumber();
          box.selected = true;
          box.sort = nextNumber;
        }
    
        // 更新选中的盒子的排序
        this.updateSelectedBoxSort();
      },
      getNextNumber() {
        // 获取下一个可用的数字
        const usedSorts = this.optionalProfList
          .filter((item) => item.selected && item.sort > 0)
          .map((item) => item.sort);
    
        for (let i = 1; i <= this.optionalProfList.length; i++) {
          if (!usedSorts.includes(i)) {
            return i;
          }
        }
      },
      updateSelectedBoxSort() {
        // 更新选中的盒子的排序
        const selectedBoxes = this.optionalProfList.filter((item) => item.selected && item.sort > 0);
    
        selectedBoxes.sort((a, b) => a.sort - b.sort);
    
        for (let i = 0; i < selectedBoxes.length; i++) {
          selectedBoxes[i].sort = i + 1;
        }
      }

用在真实场景中

数据请求回来数据处理

//数据请求回来的逻辑
//是否是第一次请求，因为我的功能里是有筛选的就会多次请求
 if(this.isSelectFirst) {
            // 筛选出标记过的保存下来一起保存
            var extract = list.filter((x) => x.sort > 0);
            this.selectedBoxes = extract;
            uni.setStorageSync('selectedBoxes', this.selectedBoxes);
 };
//list是对象数组数据
 list.forEach((item, index) => {            
            // 把上次新选的序号修改到专业数组
            this.selectedBoxesT.map((item1) => {
              if (item1.id == item.id) {
                item.sort = item1.sort;
              }
            });

            if (item.sort == 0) {
              item.selected = false;
            } else {
              item.selected = true;
            }

            return item;
          });

          this.optionalProfList = list;

selectBox(index, id) {
       //根据id过滤出点击的项
        var box1 = this.optionalProfList.filter((x) => x.id == id);
        var box = box1[0];

       console.log('初始', box1,box,index);
        // 选中未选中的盒子
      if (!box.selected) {
     //数字
        const nextNumber = this.getNextNumber();
       
       //更改选择状态和顺序数字
        box.selected = true;
        box.sort = nextNumber;


        // 将选中的盒子添加到selectedBoxes中
        this.selectedBoxes.push(box);

        // 新选未保存的,也放在一个数组保存一份,用在筛选后也保持勾选
        this.selectedBoxesT.push(box);

       //选中的id也添加到id数组里
        this.selectIndex.push(id); 
        console.log(' this.selectedBoxes', this.selectedBoxes);
      } else {
        // 取消选中已选中的盒子
         //更改选择状态和顺序数字
        box.selected = false;
        box.sort = 0;
       //从选中的id数组里删除对应的项
        this.selectIndex.splice(this.selectIndex.indexOf(id), 1);

        // 从selectedBoxes中移除取消选中的盒子
        const index = this.selectedBoxes.findIndex(obj => obj.id == box.id);
         console.log('index',box, index);
        if (index !== -1) {
          this.selectedBoxes.splice(index, 1);
        }
       //从新选未保存的也移除
        var indexT = this.selectedBoxesT.findIndex(
          (item) => item.id == id
        );
        if (indexT !== -1) {
          this.selectedBoxesT.splice(indexT, 1);
          console.log(' this.selectedBoxesT', this.selectedBoxesT);
        }
      }
      
         console.log(' 保存this.selectedBoxes', this.selectedBoxes);
        //保存在本地
         uni.setStorageSync('selectedBoxes', this.selectedBoxes);
      
    },
  

    
    getNextNumber() {
       //获取本地保存的选中的盒子
       const oldSelect=  uni.getStorageSync('selectedBoxes');
      
      this.optionalProfList.forEach(item => {
        // 使用 find 方法检查数组中是否存在相同 id 的项
        const existingItem = oldSelect.find(i => i.id == item.id);
        
        if (!existingItem) {
          // 如果数组中不存在相同 id 的项，将当前项添加到数组中
          oldSelect.push(item);
        }
      });
       console.log('oldSelect', oldSelect);
      
      // 获取下一个可用的数字
      for (let i = 1; i <= oldSelect.length; i++) {
        if (!oldSelect.some((box) => box.sort === i)) {
          console.log('i',i);
          return i;
        }
      }
    },