Element多选框组el-checkbox-group,重新勾选时不希望数组顺序被打乱

之前一直没注意到一个问题,就是el-checkbox-group选择的顺序是按照点击的多选框的顺序,而不是按照多选框的排列顺序。但是我们不希望它的顺序被打乱,有什么好的解决方案呢?

//  checkboxList : checkbox的数组,checkList选中数据的数组
<el-checkbox-group
   class="checkbox-group"
    flex="wrap:wrap"
    v-model="checkList">
    <el-checkbox
       v-for="(item, index) in checkboxList"
       :label="item"
        :key="index">
           {{ item }}
         </el-checkbox>
  </el-checkbox-group>

下面本博主有两个方案:

1、重新排序

let checkboxList=['a','b','c']
let checkList=['c','a']
let newCheckLIst=checkList.sort((a, b) => {
return checkboxList.indexOf(a) - checkboxList.indexOf(b)
})

2、如果是没法排序的汉字之类的,就只能用checkbox的数组进行filter,挨个去过滤是否在已选的数组中

let checkboxList=['a','b','c']
let checkList=['c','a']
const newCheckLIst = checkboxList.filter(item => checkList.includes(item))

版权声明:除特别注明外,本站所有文章均为田珊珊个人博客原创

转载请注明:出处来自田珊珊个人博客 » Element多选框组el-checkbox-group,重新勾选时不希望数组顺序被打乱

点赞

发表评论

邮箱地址不会被公开。 必填项已用*标注

  1. 言情库说道:

    不知道说什么好,还是祝疫情早点结束吧!