😠踩坑之uniapp的uni-data-checkbox顺序固定的bug（elementPlus没有）

问题描述

在开发移动端的时候，uniapp是一个不可描述的选择
uniapp提供了一些组件库，以供我们使用，比如uni-ui
但是某个组件，可能存在一些不符合常理的bug
比如uni-data-checkbox这个bug
本篇文章就是讲述笔者遇到的勾选框问题
我们先看下面两张图（和elementPlus作对比）

elementPlus的勾选框el-checkbox-group/el-checkbox效果

对应勾选框代码

js 复制代码

<template>
  <div>
    {{ checkList }}
    <el-checkbox-group v-model="checkList">
      <el-checkbox
        v-for="item in arr"
        :key="item.name"
        :label="item.name"
        :value="item.value"
      />
    </el-checkbox-group>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const arr = ref([
  { name: "孙悟空", value: "孙悟空" },
  { name: "猪八戒", value: "猪八戒" },
  { name: "沙和尚", value: "沙和尚" },
]);

const checkList = ref([]);
</script>

uni-data-checkbox

对应勾选框代码

js 复制代码

<view class="uni-px-5 uni-pb-5">
  <view class="text">{{ persons }}</view>
  <uni-data-checkbox
    multiple
    v-model="persons"
    :localdata="[
      { text: '孙悟空', value: '孙悟空' },
      { text: '猪八戒', value: '猪八戒' },
      { text: '沙和尚', value: '沙和尚' },
    ]"
  ></uni-data-checkbox>
</view>

const persons = ref([])

勾选顺序问题

从上图我们可以看到
同样是顺序勾选，先勾选沙和尚、然后是猪八戒、最后是孙悟空
elementPlus的勾选框组件，存储的值就是【沙和尚，猪八戒，孙悟空】
对标Vant也是正常的，不赘述
但是，但是，uni-data-checkbox这个勾选框组件存储的却是【孙悟空，猪八戒，沙和尚】
我们知道数组是讲究顺序的，uni-data-checkbox这个设计方式就是一个很严重的问题（假设对于存储顺序也有严格的要求）
最终，笔者放弃了uni-data-checkbox的使用（没有提供api去控制这个问题）
直接使用checkbox-group和checkbox实现（带有最大数量限制）

自己写效果图

这样就解决问题了，手动控制，能够存储点击勾选的正确顺序

代码

html 复制代码

<template>
  <view class="testWrap">
    <view class="testTitle">直接使用</view>
    {{ vvv }}
    <checkbox-group @change="handleChange">
      <checkbox
        :disabled="vvv.length == MAX && !vvv.includes(opti)"
        v-for="opti in list"
        :value="opti"
        :key="opti"
      >
        {{ opti }}
      </checkbox>
    </checkbox-group>
  </view>
</template>

<script setup>
import { ref } from "vue";

let MAX = 2;
const list = ref(["孙悟空", "猪八戒", "沙和尚"]);
const vvv = ref([]);

const handleChange = (e) => {
  vvv.value = [...e.target.value];
};
</script>

......