【Vue】mock模拟后端表格数据在前端页面的显示

前端页面

template

<template>
  <div>
    <el-table
      :data="list"
    >
      <el-table-column label="ID" prop="id" align="center">
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="用户名">
        <template slot-scope="{row}">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

script

<script>
//导入'@/api/list'中的fetchList
import{ fetchList } from '@/api/list'

export default {
  data() {
    return {
      //声明list变量
      list: null,
    }
  },

  created() {
    this.getList()
  },

  methods: {
    getList() {
      //调用'@/api/list'中的fetchList
      fetchList(this.list).then(response => {
        //将后端数据传入给页面list变量
        this.list = response.data.items
      })
    }
  }
}
</script>

mock模拟后端数据

src/api/list.js

import request from '@/utils/request'

export function fetchList(query) {
  return request({
    //调用后端地址接口，必须与后端地址接口一致
    url: '/vue-element-admin/list',
    method: 'get',
    params: query
  })
}

mock/index.js

声明模拟后端接口数据

const Mock = require('mockjs')

const print = require('./list')

const mocks = [
  ...list
]

mock/list.js

const Mock = require('mockjs')

const List = []
const count = 100

for (let i = 0; i < count; i++) {
  //模拟数据
  List.push(Mock.mock({
      id: '@id',
      name: '@cname',
  }))
}

module.exports = [
  {
      url: '/vue-element-admin/list',
      type: 'get',
      response: config => {
          return {
              code: 20000,
              data: {
                  //在前端页面中调用数据用total/items变量
                  //将List.length/List数据传入给total/items变量
                  total: List.length,
                  items: List
              }
          }
      }
  },
]