Vue3+TS+ElementUI搭建管理系统之MockJs数据实现表格分页

1、ts中安装mock

npm install @types/mockjs -D

2、新建mock文件

// src文件夹下
mock
├─index.ts
├─data
|  └table.ts

具体接口table.ts文件

import { Random } from 'mockjs'
interface ListType {
    id: number,
    name: string,
    code: number,
    province: string,
    date: string
}
const dataList: Array<ListType> = [];
for (let i = 0; i < 100; i++) {
    dataList.push({
        id: i,
        name: Random.cname(),
        code: Random.integer(100000, 800000),
        province: Random.province(),
        date: Random.date(),
    })
}
export default {
    getList: (params: any) => {
        const info = JSON.parse(params.body);
        const [index, size, total] = [info.pageIndex - 1, info.pageSize, dataList.length]
        const len: any = total / size
        const totalPages: number = len - parseInt(len) >= 0 ? parseInt(len) + 1 : len
        const newDataList: Array<ListType> = dataList.slice(index * size, (index + 1) * size)
        return {
            total: dataList.length,
            data: newDataList,
            totalPages: totalPages
        }
    },
    update: (params: any) => {
        const info = JSON.parse(params.body);
        dataList[info.index] = info.data
        return {
            result: true,
            data: 'success'
        }
    },
    delete: (params: any) => {
        const info = JSON.parse(params.body);
        dataList.splice(info.index, 1);
        return {
            result: true,
            data: 'success'
        }
    }
}

index.ts文件

import Mock from 'mockjs'
import table from './data/table'
​
Mock.mock('/table/getList', 'post', table.getList)
Mock.mock('/table/update', 'post', table.update)
Mock.mock('/table/delete', 'post', table.delete)
​
export default Mock

3、main.ts文件

if (process.env.NODE_ENV === 'development') {
    require ('./mock/index.ts')
}

4、请求封装

import request from '@/utils/request'
// 表格
export function getTableList(params: any): Promise<any> {
    return request({
        url: '/table/getList',
        method: 'post',
        data: params
    })
}
export function deleteTableList(params: any): Promise<any> {
    return request({
        url: '/table/delete',
        method: 'post',
        data: params
    })
}
export function updateTableList(params: any): Promise<any> {
    return request({
        url: '/table/update',
        method: 'post',
        data: params
    })
}

5、调用

import { getTableList, deleteTableList, updateTableList } from "@/api/api";
getTableList() {
  let params = {
    pageIndex: this.pageIndex,
    pageSize: this.pageSize,
  };
  getTableList(params).then((res: any) => {
    this.tableData = res.data;
    this.total = res.total;
  });
},