user.vue:

<template>
    <el-row class="wrap">
        <el-col :span="24" class="warp-breadcrum">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: "/" }"></el-breadcrumb-item>
                <el-breadcrumb-item></el-breadcrumb-item>
           </el-breadcrumb>
        </el-col>

        <el-col :span="24" class="warp-min" v-loading="loading"  element-loading-text=""
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        >
            <el-col :span="24" class="toolbar">
                <el-form :inline="true" :model="formInline" class="demo-form-inline" align="left">
                   <el-input v-model="formInline.user" placeholder="//" style="min-width: 240px;"></el-input>
                    <el-button type="primary" @click="onSubmit"></el-button>
                </el-form>
            </el-col>

             <el-table
                :data="users"
                highlight-current-row
                v-loading="loading"
                align="center">
                    <el-table-column    
                        prop="this.users.name"
                        label=""
                        width="120"
                        sortable>
                    </el-table-column>
                    <el-table-column
                        prop="this.users.nickname"
                        label=""
                        width="120"
                        sortable>
                    </el-table-column>
                    <el-table-column
                        prop="this.users.city"
                        label=""
                        width="100"
                        sortable>
                    </el-table-column>
                    <el-table-column
                        prop="this.users.email"
                        label=""
                        width="160"
                        sortable>
                    </el-table-column>
                    <el-table-column
                        prop="this.users.address"
                        label=""
                        sortable>
                    </el-table-column>
                </el-table>
        </el-col>

    </el-row>
</template>
<script>
export default {
  name: "UserList",
  data() {
      return {
        loading: false,
        formInline: {
          user: ""
        },
        users: [{
            nickname: "",
            name: "",
            city: "",
            email: "",
            address: ""
          }]
      }
    },
    creates () {
        this.getdata();
    },
    methods: {
      onSubmit() {
        console.log("submit!");
      },
      getdata() {
          this.$axios.get("/userlist").then(res => {
              this.users = res.data
          }).catch((error) => {
            console.info(error);
        })
      }

    }
}
</script>

mock.js:

// mockjs
const Mock = require("mockjs")
//  mock.Random 
const Random = Mock.Random
// mock
const userList = function () {
  let Data = []
  for (let i = 0; i < 100; iPP) {
    let data = {
      nickname: Random.cname(),
      name: Random.cname(),
      city: Random.city(),
      email: Random.email(),
      address: Random.region()}
    Data.push(data)
  }
  return {
    Data: Data
  }
}
// Mock.mock( url, post/get , );
Mock.mock("/userlist", "get", userList)

main.js:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from "vue"
import App from "./App"
import ElementUI from "element-ui"
import "element-ui/lib/theme-chalk/index.css"
import "@/assets/iconfont.css"
import router from "./router"
import echarts from "echarts"
import axios from "axios"
require("./mock.js")

Vue.config.productionTip = false
Vue.prototype.$echarts = echarts
Vue.use(ElementUI)
Vue.prototype.axios = axios
/* eslint-disable no-new */
new Vue({
  el: "-sharpapp",
  router,
  components: { App },
  template: "<App/>"
})

Why not send a request?