场景
有的时候我们需要从后台返回数据，但是后台没有提供这个接口，我们可以将数据打包到js文件中，然后向外暴露要使用的数据作为后台接口返回的数据
举例
模拟物流接口数据的返回
-
创建
wuliudata.js文件
export default [
{
"time": "2021-09-22 12:29:07",
"context": "【济南市】包裹已签收！签收人是【工业北路老有福商店】，如有问题请联系陈洪良：，投诉电话： 速递期待再次为您服务！"
},
{
"time": "2021-09-22 07:46:59",
"context": "【济南市】【济南历城华山网点】的小哥陈洪良正在派件（可放心接听专属热线），投诉电话:"
},
{
"time": "2021-09-22 07:46:18",
"context": "【济南市】 快件到达【济南历城华山网点】"
},
{
"time": "2021-09-21 13:31:12",
"context": "【济南市】快件离开【济南转运中心】已发往【济南历城华山网点】"
},
{
"time": "2021-09-21 13:20:56",
"context": "【济南市】 快件到达【济南转运中心】"
},
{
"time": "2021-09-20 20:00:52",
"context": "【金华市】快件离开【义乌丰树转运中心】已发往【济南转运中心】"
},
{
"time": "2021-09-20 19:53:35",
"context": "【金华市】 快件到达【义乌丰树转运中心】"
},
{
"time": "2021-09-20 15:24:41",
"context": "【金华市】快件离开【义乌后宅网点】已发往【义乌丰树转运中心】"
},
{
"time": "2021-09-20 15:00:17",
"context": "【金华市】【义乌后宅网点】的占冬梅已取件。投诉电话:|出港查件"
}
]
- 根据组件的生命周期来进行加载上面导出的数据
// 由于后端还未提供接口，供临时测试使用
import wuliuList from './wuliudata.js'
export default {
data(){
return {
// 物流数据
wuliuList
}
},
methods:{
async showWuLiu(){
this.toggleWuliuDialogVisible = true
// 此处接口没有返回结果，暂不处理
// let {data:res} = await this.$http.get('/kuaidi/123')
// console.log(wuliuList)
}
}
}
效果图：
- 然后根据数据渲染结构
<el-timeline>
<el-timeline-item
v-for="(item, index) in wuliuList"
:key="index"
:timestamp="item.time">
{{item.context}}
</el-timeline-item>
</el-timeline>
效果图：
