vue3，把双层循环的的数组用对象的格式显示出来

 <div v-for="(itemClass, index) in tabsValue" :key="index">
          <el-form-item
            :label=itemClass.labelName
            :prop=itemClass.columnName
          >
            <el-checkbox-group v-model="checkList[itemClass.columnName]" v-for="(item, index) in itemClass.list"
                               :key="index"
                               style="padding: 0 5px "
                               @click="handleList(index,item.val,itemClass.columnName)">
              <el-checkbox v-model="item.val" :label=item.name>
                <span>{{ item.name }}({{ item.count }})</span>
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </div>

const checkList = ref([]);


 let queryObj = [];
  ruleForm.value = [];
  Object.keys(checkList.value).forEach((key: any, index: any) => {
    let val = checkList.value[key];
    queryObj[key] = val.join("|");//下发的时候用|分隔
    ruleForm.value.push({
      [key]: queryObj[key]
    });
  });
  ruleForm.value =  ruleForm.value.reduce((result, item) => {
    return { ...result, ...item };
  }, {});