异步获取数据,加载动画

This commit is contained in:
ZtRXR 2023-09-03 12:04:43 +08:00
parent d59b289e96
commit 842db049e7

View File

@ -17,14 +17,23 @@ interface TopHots{
searchUrl: string
}
}
const rawData:TopHots[] = await $fetch(`https://data.zziyu.cn/hot/top/${props.fromWeb}?limit=${props.limit}&hours=${props.hours}`)
const data:TopHots[] = []
rawData.forEach(d=>{
let newD= d;
let aDate = new Date(Date.parse(d.lastTime))
newD.lastTime=aDate.toLocaleString()
data.push(newD)
})
const rawData = reactive<TopHots[]>([])
const loading = ref(true)
$fetch(`https://data.zziyu.cn/hot/top/${props.fromWeb}?limit=${props.limit}&hours=${props.hours}`)
.then((dataRaw)=>{
let data = dataRaw as unknown as TopHots[]
data.forEach(d=>{
let newD= d;
let aDate = new Date(Date.parse(d.lastTime))
newD.lastTime=aDate.toLocaleString()
rawData.push(newD)
})
loading.value = false
})
const router = useRouter()
const gotoWeb = (row, column, cell, event)=>{
// console.log(row.fromWeb.searchUrl+row.word)
@ -34,7 +43,7 @@ const gotoWeb = (row, column, cell, event)=>{
<template>
<client-only>
<el-table :data="data" style="width: 90%;max-width: 600px;margin: 10px;margin-bottom: 15px" :table-layout="'fixed'" @cell-click="" @cell-dblclick="gotoWeb">
<el-table v-loading="loading" :data="rawData" style="min-height: 200px;width: 90%;max-width: 600px;margin: 10px;margin-bottom: 15px" :table-layout="'fixed'" @cell-click="" @cell-dblclick="gotoWeb">
<el-table-column prop="word" :label="props.fromWeb+' 持久热搜'" width="180" />
<el-table-column prop="lastTime" label="最后上榜" width="180" />
<el-table-column prop="times" label="上榜次数" />