前言

闲来无事，在学校都是使用的thymeleaf来展示数据的，Vue作为目前最流行的前端框架之一，且我在前不久学习过一点Vue，就想尝试一下使用Vue来展示数据。

技术

• Vue 2.x
• Element UI
• axios

代码

Vue

<template>
  <div class="home">
    <el-button @click="query()">查询部门信息</el-button>
    <el-table
        :data="tableData"
        height="250"
        border
        style="width: 100%">
      <el-table-column
          prop="deptno"
          label="部门编号"
          width="180">
      </el-table-column>
      <el-table-column
          prop="dname"
          label="部门名称"
          width="180">
      </el-table-column>
      <el-table-column
          prop="loc"
          label="地址">
      </el-table-column>
      <el-table-column
          prop="status"
          label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.status == 1">在编</span>
          <span v-else>不在编</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data(){
    return{
      tableData:[

      ]
    }
  },
  methods:{
    query(){
      this.request.get('http://localhost:8089/vue_dept').then((response)=>{
        this.tableData = response.data;
      })
    }
  }
}
</script>

Main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios'


Vue.prototype.request = axios;
Vue.config.productionTip = false

Vue.use(ElementUI);

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

效果