Spring boot+Shiro+ spring MVC+swagger UI +Mybatis+mysql+Vue +Element UI 之四 vue 整合Element UI

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

本项目中用Vue整合Element UI进行前端开发，相比于bootstrap，另开贴分析。

1. 如何整合

在 main.js 中写入以下内容可以完整引入：

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

Vue.use(ElementUI)

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

部分引入，比如button 和select

import Vue from 'vue'
import { Button, Select } from 'element-ui'
import App from './App.vue'

Vue.component(Button.name, Button)
Vue.component(Select.name, Select)
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

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

本项目中main.js文件如下：

import Vue from 'vue'
import App from './App'
import {sync} from 'vuex-router-sync'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import router from './router'
import store from './store'
import baseComponents from './components'
sync(store, router)
Vue.use(ElementUI)
Vue.config.productionTip = false
Vue.use(baseComponents)
Vue.mixin({
  methods: {
    $showToast (toast) {
      this.$store.dispatch('toastPush', toast)
    }
  }
})
let vm = new Vue({
  el: '#app',
  router,
  store,
  template: '',
  components: { App }
})

Vue.use({
  vm
})

2. 应用实例

文本框

文本框输入的值会绑定到input，在下面到函数中，可以把input传入后台请求，看下文到logKeyWord

下拉列表

表格

项目中采用如下写法， 在element的table组件中使用slot-scope（作用域插槽）来实现该需求，slot-scope到值继承了父组件传来到值，然后进行处理。