vue中简单模拟数据

我的使用场景    vue2后台管理系统  使用elementUI

需要模拟的数据过多时，使用json文件分离出来

目录

1.创建模拟数据

2.引入模拟数据

3.使用模拟数据

1.创建模拟数据

在当前页面同级目录下创建mock.json文件

[
    {
        "month": "2023 - 11",
        "people": "张三",
        "dept": "测试部门",
        "projectA": "AAA",
        "projectB": "BBB",
        "projectC": "CCC",
        "projectD": "DDD",
        "projectE": "EEE",
        "projectF": "FFF"
    }
]

2.引入模拟数据

在当前页面下引入需要模拟的数据

import mock from "./mock.json";

3.使用模拟数据

在elementUI的   el-table标签定义  :data="mockTableData"

在js中把模拟的数据 作为表格数据

 data() {
    return {
      mockTableData: mock
    };
  },

除此之外，可以使用mock 来模拟数据，数据会更灵活，易操作。