Element多选框组el-checkbox-group，重新勾选时数组顺序被打乱?

前言

        最近使用element的el-checkbox-group组件，发现多选点击之后，最后得到的数据是乱的。顺序点击没问题，如果不按顺序点击，后台得到的数据是乱序的。但我们的一些处理逻辑往往需要顺序处理，不然后台代码不好处理。

问题        

        比如我的表单是这样的，我可能会选择三个中的某一个，又或者先点第三个再点第一个，这样后台得到的数据顺序是“证件报告,设备报告”，但是其实我想要的是“设备报告,证件报告”。

        因为el-checkbox-group选择的顺序是按照点击的多选框的顺序，而不是按照多选框的排列顺序，但是我们不希望它的顺序被打乱，于是我们可以这样处理：

        组件部分代码

<el-form-item label="报告类型" prop="DocumentTypes">
    <el-checkbox-group v-model="form.DocumentTypes">
    	<el-checkbox-button  v-for="(v1,index) in typeList" :label="v1.Title" :key="v1.Title">{{v1.Title}}</el-checkbox-button>
    </el-checkbox-group>
	<span style="color:orange">仅支持单选或者全选</span>
</el-form-item>

        后台返回的数据格式

解决方案        

        因为我的数组是没法排序的汉字，就只能用checkbox的数组进行filter，去过滤是否在已选的数组中；

//数组组装
let list = []
for(var i=0;i<this.typeList.length;i++){
	list.push(this.typeList[i]['Title'])
}
let checkboxList = list//是原本的数组
let checkList    = this.form.DocumentTypes//是选中的数组
let sortArray    = list.filter(item => checkList.includes(item))//排序后的数组
console.log(checkboxList)
console.log(checkList)
console.log(sortArray)

1、顺序点击        

        按顺序点击的时候，得到的结果如下：

2、乱序点击        

        当我们不按顺序点击的时候，得到的结果：

        此次，就验证了我们前面说到的问题，解决了排序的问题；

其他        

        如果没有汉字之类特殊的字符，比如字母、数字，可以直接进行重新排序：

//数组组装
let list = []
for(var i=0;i<this.typeList.length;i++){
	list.push(this.typeList[i]['Title'])
}
let checkboxList = list//是原本的数组
let checkList    = this.form.DocumentTypes//是选中的数组
let sortArray    = checkList.sort((a, b) => {
	return checkboxList.indexOf(a) - checkboxList.indexOf(b)
})