1. Requirement background

The new list is reconstructed using vxe-table. In the technology research stage, test whether the vxE-Table framework meets the requirements and how the performance is. Expect to create 50 fields (30 for the primary table and 20 for the word table), showing 100 pieces of data at a time. Mock data creation using the MockJS framework, and just keep track of some of the problems that you encountered along the way, so if it helps you, give it a like. The renderings are shown below.

2. Creation of one-dimensional arrays

Create an array of length 8, each element consisting of three levels [province, city, county].

Mock.mock({
  "list|8": [Random.province() + Random.city() + Random.county()]
}).list;
Copy the code

3. Creation of two-dimensional arrays

Create a 2-d array of length 8*4, each element consisting of three elements [province, city, county].

Mock.mock({
  "firstlist|8": [
    Mock.mock({
      "secondlist|4": [Random.province() + Random.city() + Random.county()],
    }).secondlist,
  ],
}).firstlist;
Copy the code

4. Use of templates

Mock.mock({
    "list|20-50": [{myname: "@myname".myemail: "@myemail".website: "@website".datetime: "@dateVal".address: "@addressVal",
      },
    ]
}).list;
Copy the code

Templates need to be defined before they can be used

Mock.Random.extend({
  textVal() {
    return Random.paragraph();
  },
  website() {
    return Random.protocol() + Random.domain();
  },
  myemail() {
    return Random.email()
  },
  mycolor() {
    return Random.color();
  },
  myname() {
    return Random.name(true)}});Copy the code

5. Mockjs intercepts front-end requests

During development, the front end organizes the interface and tests itself with local simulation data. After the back-end interface is developed, the front-end interface can be directly switched to the test environment for testing again without any changes. By extension, MockJS can intercept front-end requests or not. For example, the development phase has the following code that requests back-end data.

this.$axios.request({
  url: '/getTableCols'.method: 'POST',
}).then((resp) = > {
  this.gridCols = resp.data;
}).catch(() = > {
  this.gridCols = [];
});
Copy the code

At the project entry, where the project is built, inject mockJS’s already written methods.

.import './mocks/table'; Mock intercepts the request.new Vue({
  el: "#app".render: h= > h(App)
});
Copy the code

There is the following code in the table.js file

Mock.mock('/getTableData'.() = > {
  return Mock.mock({
    "list|20-50": [
      {
        ......
      },
    ],
  }).list;
});
Copy the code

If you don’t need to intercept the front-end request, just comment out the following code

import './mocks/table'; Mock intercepts the request
Copy the code

6. Complete code

Refer to the case