Mockjs生成Vue数据表格

1.npm install mockjs --save

2.在src文件下建mock.js文件

3.mock.js文件文件内容

//引入mockjs
import Mock from 'mockjs'
//使用mockjs模拟数据
export default Mock.mock('/api/users', (req, res) => {
  return Mock.mock({
    "user|1-10": [{
      'name': '@cname',
      'id|+1': 1,
      'age|10-60': 0,    //10-60以内的随机数，0用来确定类型
      'birthday': '@date("yyyy-MM-dd")',    //年月日
      'city': '@city(true)'    //中国城市
    }]
  })
})

4.写app.vue的template

<template>
  <div id="app">
      <el-table :data="users" stripe style="80%" align="center">
        <el-table-column prop="name" label="姓名" width="180" align="center"></el-table-column>
        <el-table-column prop="age" label="年龄" width="180" align="center"></el-table-column>
        <el-table-column prop="birthday" label="出生日期" width="180" align="center"></el-table-column>
        <el-table-column prop="city" label="地址" width="180" align="center"></el-table-column>
      </el-table>
    </div>
</template>

4.写app.vue的script:此前要安装npm install axios

<script>
  import axios from 'axios';    //vue2.x的引入axios进行前后端交互
export default {
  name: 'HelloWorld',
  data () {
    return {
      users: []
    }
  },
  mounted: function(){
    axios.get('/api/users').then(res=>{
      console.log(res)
      this.users= res.data.user;
    })
  }
}

</script>

5.引入到main.js中

import Vue from 'vue';
import ElementUI from 'element-ui';
// import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
import Mock from './mock'

Vue.use(ElementUI);


new Vue({
  el: '#app',
  render: h => h(App)
});