一、写Json数据文件【简单直接一点】
0.1、将自己写的data.json文件放置dist文件下，便于访问
{
"data": {
"records": [
{
"id": 65,
"link": null,
"circulationArea": 20.0,
"provinceCode": "320000",
"provinceName": "江苏省",
"cityCode": "320900",
"cityName": "盐城市",
"countyCode": "320921",
"countyName": "响水县",
"townCode": "320921401",
"townName": "省属黄海农场",
"address": "黄海农场",
"orderReleaseTime": null,
"startTime": "2025-01-07 11:58:52",
"endTime": "2025-01-08 07:59:01",
"farmerId": 142,
"createTime": "2025-01-07 07:59:44",
"updateTime": null,
"deleted": 0
},
{
"id": 64,
"link": null,
"circulationArea": 10.0,
"provinceCode": "320000",
"provinceName": "江苏省",
"cityCode": "320900",
"cityName": "盐城市",
"countyCode": "320924",
"countyName": "射阳县",
"townCode": "320924101",
"townName": "临海镇",
"address": "临海",
"orderReleaseTime": null,
"startTime": "2024-11-30 10:46:05",
"endTime": "2024-11-30 17:46:14",
"farmerId": 152,
"createTime": "2024-11-29 17:46:43",
"updateTime": "2025-05-12 16:16:02",
"deleted": 0
},
{
"id": 63,
"link": null,
"circulationArea": 10.0,
"provinceCode": "320000",
"provinceName": "江苏省",
"cityCode": "320900",
"cityName": "盐城市",
"countyCode": "320924",
"countyName": "射阳县",
"townCode": "320924104",
"townName": "四明镇",
"address": "四明镇",
"orderReleaseTime": null,
"startTime": "2024-12-02 10:29:17",
"endTime": "2024-12-03 15:29:29",
"farmerId": 129,
"createTime": "2024-11-29 15:30:09",
"updateTime": "2024-11-29 15:30:46",
"deleted": 0
},
{
"id": 62,
"link": null,
"circulationArea": 10.0,
"provinceCode": "320000",
"provinceName": "江苏省",
"cityCode": "320900",
"cityName": "盐城市",
"countyCode": "320924",
"countyName": "射阳县",
"townCode": "320924100",
"townName": "合德镇",
"address": "13",
"orderReleaseTime": null,
"startTime": "2024-11-27 09:29:26",
"endTime": "2024-11-29 09:29:30",
"farmerId": 151,
"createTime": "2024-11-27 09:30:05",
"updateTime": "2024-11-27 10:57:25",
"deleted": 0
},
{
"id": 61,
"link": null,
"circulationArea": 50.0,
"provinceCode": "320000",
"provinceName": "江苏省",
"cityCode": "320900",
"cityName": "盐城市",
"countyCode": "320921",
"countyName": "响水县",
"townCode": "320921101",
"townName": "陈家港镇",
"address": "1234",
"orderReleaseTime": null,
"startTime": "2024-11-23 09:41:29",
"endTime": "2024-11-24 09:41:35",
"farmerId": 142,
"createTime": "2024-11-22 09:42:15",
"updateTime": "2024-11-22 09:43:21",
"deleted": 0
},
{
"id": 60,
"link": null,
"circulationArea": 580.0,
"provinceCode": "320000",
"provinceName": "江苏省",
"cityCode": "320900",
"cityName": "盐城市",
"countyCode": "320924",
"countyName": "射阳县",
"townCode": "320924106",
"townName": "海河镇",
"address": "海河大楼201",
"orderReleaseTime": null,
"startTime": "2024-11-11 10:18:19",
"endTime": "2024-11-14 10:18:24",
"farmerId": 143,
"createTime": "2024-11-11 10:19:42",
"updateTime": null,
"deleted": 0
},
{
"id": 59,
"link": null,
"circulationArea": 258.0,
"provinceCode": "320000",
"provinceName": "江苏省",
"cityCode": "320300",
"cityName": "徐州市",
"countyCode": "320305",
"countyName": "贾汪区",
"townCode": "320305005",
"townName": "潘安湖街道",
"address": "休息",
"orderReleaseTime": null,
"startTime": "2024-11-11 10:13:28",
"endTime": "2024-11-12 10:06:31",
"farmerId": 143,
"createTime": "2024-11-11 10:14:15",
"updateTime": "2024-11-11 10:21:29",
"deleted": 0
},
{
"id": 58,
"link": null,
"circulationArea": 1.0,
"provinceCode": "320000",
"provinceName": "江苏省",
"cityCode": "320200",
"cityName": "无锡市",
"countyCode": "320206",
"countyName": "惠山区",
"townCode": "320206002",
"townName": "长安街道",
"address": "1",
"orderReleaseTime": null,
"startTime": "2024-11-07 13:53:41",
"endTime": "2024-11-07 13:53:43",
"farmerId": 136,
"createTime": "2024-11-07 13:53:59",
"updateTime": "2024-11-07 14:55:59",
"deleted": 0
},
{
"id": 57,
"link": null,
"circulationArea": 1.0,
"provinceCode": "320000",
"provinceName": "江苏省",
"cityCode": "320200",
"cityName": "无锡市",
"countyCode": "320206",
"countyName": "惠山区",
"townCode": "320206002",
"townName": "长安街道",
"address": "1",
"orderReleaseTime": null,
"startTime": "2024-11-07 13:50:19",
"endTime": "2024-11-06 13:50:22",
"farmerId": 136,
"createTime": "2024-11-07 13:50:32",
"updateTime": "2024-11-07 14:48:37",
"deleted": 0
},
{
"id": 56,
"link": null,
"circulationArea": 89.0,
"provinceCode": "320000",
"provinceName": "江苏省",
"cityCode": "321100",
"cityName": "镇江市",
"countyCode": "321111",
"countyName": "润州区",
"townCode": "321111002",
"townName": "和平路街道",
"address": "打的费123号",
"orderReleaseTime": null,
"startTime": "2024-11-05 16:07:07",
"endTime": "2024-11-04 16:07:09",
"farmerId": 143,
"createTime": "2024-11-05 16:07:51",
"updateTime": null,
"deleted": 0
},
{
"id": 86,
"link": null,
"circulationArea": 89.0,
"provinceCode": "320000",
"provinceName": "安徽省",
"cityCode": "321100",
"cityName": "镇江市",
"countyCode": "321111",
"countyName": "南京市",
"townCode": "321111002",
"townName": "行之路",
"address": "南京国家农创中心",
"orderReleaseTime": null,
"startTime": "2024-11-05 16:07:07",
"endTime": "2024-11-04 16:07:09",
"farmerId": 143,
"createTime": "2024-11-05 16:07:51",
"updateTime": null,
"deleted": 0
}
]
},
"meta": {
"msg": "获取成功",
"status": 200
}
}
二、对Json做处理
0.1、引入axios
import axios from 'axios';
0.2、对json请求处理
const tableDataNew = ref([])
const pageSize = ref(10)
const currentPage = ref(1)
axios.get('data.json')
.then(response => {
console.log("安全执法监督-Json数据---------:", response.data.data.records);
tableDataNew.value = response.data.data.records;
})
.catch(error => {
console.error("There was an error!", error);
});
0.3、计算当前页需要展示的数据
const pagedData = computed(() => {
const start = (currentPage.value - 1) * pageSize.value
const end = start + pageSize.value
return tableDataNew.value.slice(start, end)
})
