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="width: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)
 });