*const* arrChengdu4 = ref([
{
'00': {
currentTime: '2024-07-09 00:00:00.000',
endType: '1',
ceshi:'这是测试数据',
typeNsme: '登录',
endProtocol: '1',
id: '00',
time: '00',
type: '',
behavior: '测试类型00'
},
13: {
currentTime: '2024-07-08 13:00:00.000',
endType: '1',
ceshi:'这是测试数据',
typeNsme: '13登录',
endProtocol: '3',
id: '13',
time: '13',
type: '1',
behavior: '测试类型13'
},
'08': {
currentTime: '2024-07-08 09:00:00.000',
endType: '1',
ceshi:'这是测试数据',
typeNsme: '登录',
endProtocol: '1',
id: '09',
time: '09',
type: '4',
behavior: '测试类型1-08'
}
},
{
'08': {
currentTime: '2024-07-09 00:00:00.000',
endType: '1',
ceshi:'这是测试数据',
typeNsme: '登录',
endProtocol: '6',
id: '00',
time: '00',
type: '7',
behavior: '测试类型2-08'
}
},
{
13: {
currentTime: '2024-07-09 00:00:00.000',
endType: '1',
ceshi:'这是测试数据',
typeNsme: '登录',
endProtocol: '6',
id: '00',
time: '00',
type: '1',
behavior: '测试类型13'
},
'08': {
currentTime: '2024-07-09 00:00:00.000',
endType: '1',
ceshi:'这是测试数据',
typeNsme: '登录',
endProtocol: '6',
id: '00',
time: '00',
type: '7',
behavior: '测试类型3-08'
}
}
])
const datas = computed(() => {
const resMap ={}
arrChengdu4.value.forEach((i) => {
Object.entries(i).forEach(([k, v]) => {
console.log('🚀 ~ file: HomeView.vue:89 ~ Object.entity ~ k,v:', k, v)
if (resMap[k]) {
resMap[k].push(v)
} else {
resMap[k] = [v]
}
})
})
return Object.entries(resMap)
.map(([k, v]) => ({ key: k, value: v }))
.sort((a, b) => a.key - b.key)
})
console.log(datas.value,'=======整理数据')
打印的datas结果
[
{
"key": "00",
"value": [
{
"currentTime": "2024-07-09 00:00:00.000",
"endType": "1",
"ceshi": "测试数据",
"typeNsme": "登录",
"endProtocol": "1",
"id": "00",
"time": "00",
"type": "",
"behavior": "测试类型00"
}
]
},
{
"key": "08",
"value": [
{
"currentTime": "2024-07-08 09:00:00.000",
"endType": "1",
"ceshi": "测试数据",
"typeNsme": "登录",
"endProtocol": "1",
"id": "09",
"time": "09",
"type": "4",
"behavior": "测试类型1-08"
},
{
"currentTime": "2024-07-09 00:00:00.000",
"endType": "1",
"ceshi": "测试数据",
"typeNsme": "登录",
"endProtocol": "6",
"id": "00",
"time": "00",
"type": "7",
"behavior": "测试类型2-08"
},
{
"currentTime": "2024-07-09 00:00:00.000",
"endType": "1",
"ceshi": "测试数据",
"typeNsme": "登录",
"endProtocol": "6",
"id": "00",
"time": "00",
"type": "7",
"behavior": "测试类型3-08"
}
]
},
{
"key": "13",
"value": [
{
"currentTime": "2024-07-08 13:00:00.000",
"endType": "1",
"ceshi": "测试数据",
"typeNsme": "13登录",
"endProtocol": "3",
"id": "13",
"time": "13",
"type": "1",
"behavior": "测试类型13"
},
{
"currentTime": "2024-07-09 00:00:00.000",
"endType": "1",
"ceshi": "测试数据",
"typeNsme": "登录",
"endProtocol": "6",
"id": "00",
"time": "00",
"type": "1",
"behavior": "测试类型13"
}
]
}
]
<script setup>
import { computed } from 'vue'
import { ref } from 'vue'
const arrChengdu = ref([
{
'00': {
currentTime: '2024-07-09 00:00:00.000',
endType: '1',
ceshi:'这是测试数据',
typeNsme: '登录',
endProtocol: '1',
id: '00',
time: '00',
type: '',
behavior: '测试类型00'
},
13: {
currentTime: '2024-07-08 13:00:00.000',
endType: '1',
ceshi:'这是测试数据',
typeNsme: '13登录',
endProtocol: '3',
id: '13',
time: '13',
type: '1',
behavior: '测试类型13'
},
'08': {
currentTime: '2024-07-08 09:00:00.000',
endType: '1',
ceshi:'这是测试数据',
typeNsme: '登录',
endProtocol: '1',
id: '09',
time: '09',
type: '4',
behavior: '测试类型1-08'
}
},
{
'08': {
currentTime: '2024-07-09 00:00:00.000',
endType: '1',
ceshi:'这是测试数据',
typeNsme: '登录',
endProtocol: '6',
id: '00',
time: '00',
type: '7',
behavior: '测试类型2-08'
}
},
{
13: {
currentTime: '2024-07-09 00:00:00.000',
endType: '1',
ceshi:'这是测试数据',
typeNsme: '登录',
endProtocol: '6',
id: '00',
time: '00',
type: '1',
behavior: '测试类型13'
},
'08': {
currentTime: '2024-07-09 00:00:00.000',
endType: '1',
ceshi:'这是测试数据',
typeNsme: '登录',
endProtocol: '6',
id: '00',
time: '00',
type: '7',
behavior: '测试类型3-08'
}
}
])
const data = computed(() => {
const resMap = {}
arrChengdu.value.forEach((i) => {
Object.entries(i).forEach(([k, v]) => {
console.log('🚀 ~ file: HomeView.vue:89 ~ Object.entity ~ k,v:', k, v)
if (resMap[k]) {
resMap[k].push(v)
} else {
resMap[k] = [v]
}
})
})
return Object.entries(resMap)
.map(([k, v]) => ({ key: k, value: v }))
.sort((a, b) => a.key - b.key)
})
</script>
<template>
<div style="display: flex">
<div
v-for="item in data"
:key="item.key"
style="background-color: #fff; border: 1px solid #ccc; color: #000; width: 300px"
>
<div>
{{ item.key }}
</div>
<div
v-for="(i, k) in item.value"
:key="k"
style="border: 1px solid pink; margin-bottom: 10px"
>
{{ i }}
</div>
</div>
</div>
</template>
