前端根据后端返回数据顺序进行页面复选框排序

vue+element ui，页面上有一排复选框，内容全是写死的，四条数据，分别根据标识来判断是否选中，比如，1，2，3，4。但是要根据后端返回的顺序来进行排序，比如后端返回的是3,1,2的话页面复选框的顺序也要跟着变，解决办法：

 sort1() {
   let filter = this.peopleCertType.filter(  // this.peopleCertType是独立数组，内容是[1,2,3,4]
     (item) => !this.ruleForm.peopleCertType.includes(item) //this.ruleForm.peopleCertType是后端返回的3,1,2；这部分主要判断未选中的，比如4
   );
   let arr = [...this.ruleForm.peopleCertType, ...filter]; //将判断后数据跟后端返回数据拼成一个新数组
   arr.forEach((ele) => {   //根据新数组顺序将数据放到页面
     if (ele == "1") {
       this.checklist.push({ id: "1", name: "1、aaaa" });
     } else if (ele == "2") {
       this.checklist.push({ id: "2", name: "2、bbbb" });
     } else if (ele == "3") {
       this.checklist.push({ id: "3", name: "3、cccc" });
     } else if (ele == "4") {
       this.checklist.push({ id: "4", name: "4、dddd" });
     }
   });
 },
//页面进行遍历
            <el-checkbox-group v-model="ruleForm.peopleCertType">
               <el-checkbox
                 v-for="(item, index) in checklist"
                 :label="item.id"
                 :key="index"
                 >{{ item.name }}</el-checkbox
               >
             </el-checkbox-group>