您的位置:首页 > Web前端 > Vue.js

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

2018-08-06 11:11 1031 查看

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

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

1. 如何整合

 

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

 
  1. import Vue from 'vue'

  2. import ElementUI from 'element-ui'

  3. import 'element-ui/lib/theme-chalk/index.css'

  4. import App from './App.vue'

  5.  
  6. Vue.use(ElementUI)

  7.  
  8. new Vue({

  9. el: '#app',

  10. render: h => h(App)

  11. })

部分引入,比如button 和select

 

 
  1. import Vue from 'vue'

  2. import { Button, Select } from 'element-ui'

  3. import App from './App.vue'

  4.  
  5. Vue.component(Button.name, Button)

  6. Vue.component(Select.name, Select)

  7. /* 或写为

  8. * Vue.use(Button)

  9. * Vue.use(Select)

  10. */

  11.  
  12. new Vue({

  13. el: '#app',

  14. render: h => h(App)

  15. })

 

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

 

 
  1. import Vue from 'vue'

  2. import App from './App'

  3. import {sync} from 'vuex-router-sync'

  4. import ElementUI from 'element-ui'

  5. import 'element-ui/lib/theme-chalk/index.css'

  6. import router from './router'

  7. import store from './store'

  8. import baseComponents from './components'

  9. sync(store, router)

  10. Vue.use(ElementUI)

  11. Vue.config.productionTip = false

  12. Vue.use(baseComponents)

  13. Vue.mixin({

  14. methods: {

  15. $showToast (toast) {

  16. this.$store.dispatch('toastPush', toast)

  17. }

  18. }

  19. })

  20. let vm = new Vue({

  21. el: '#app',

  22. router,

  23. store,

  24. template: '<App/>',

  25. components: { App }

  26. })

  27.  
  28. Vue.use({

  29. vm

  30. })


2. 应用实例

 

文本框

 

 
  1. <el-input v-model="input" placeholder="请输入内容"></el-input>

  2.  
  3. <script>

  4. export default {

  5. data() {

  6. return {

  7. input: ''

  8. }

  9. }

  10. }

  11. </script>

 

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

 

 
  1. <template>

  2. <section>

  3. <div v-loading='loading'>

  4. <el-col :span='24' class='toolbar' style='padding-bottom: 0px;'>

  5. <el-form :inline='true'>

  6. <el-form-item>

  7. <el-input v-model='logKeyWord' placeholder='请输入关键字' clearable></el-input>

  8. </el-form-item>

  9. <el-form-item>

  10. <el-button type='primary' v-on:click='getAllLogs'>查询</el-button>

  11. </el-form-item>

  12.  
  13. </el-form>

  14. </el-col>

  15.  
  16. <el-table :data='logLists' stripe style='width: 100%; margin: 0 auto; text-align:center;'>

  17. <el-table-column label='ID'>

  18. <template slot-scope='scope'>

  19. <label>{{scope.row.id}}

  20. <span></span>

  21. </label>

  22. </template>

  23. </el-table-column>

  24. <el-table-column label='时间'>

  25. <template slot-scope='scope'>

  26. <label>{{scope.row.createTime}}

  27. <span></span>

  28. </label>

  29. </template>

  30. </el-table-column>

  31. <el-table-column label='操作'>

  32. <template slot-scope='scope'>

  33. <label>{{scope.row.operateContent}}

  34. <span></span>

  35. </label>

  36. </template>

  37. </el-table-column>

  38. <el-table-column label='操作人'>

  39. <template slot-scope='scope'>

  40. <label>{{scope.row.userId}}

  41. <span></span>

  42. </label>

  43. </template>

  44. </el-table-column>

  45. <el-table-column label='操作结果'>

  46. <template slot-scope='scope'>

  47. <label>{{scope.row.displayName}}

  48. <span></span>

  49. </label>

  50. </template>

  51. </el-table-column>

  52. </el-table>

  53.  
  54. </div>

  55. </section>

  56. </template>

  57. <style rel='stylesheet/scss' lang='scss'>

  58. .el-table thead tr th {

  59. background-color: rgba(28,148,255,0.6) !important;

  60. color: #fff;

  61. }

  62. .el-table th{

  63. text-align: center;

  64. }

  65. .addBtn {

  66. background: #fff;

  67. color: #1C94FF;

  68. }

  69. </style>

  70. <script lang='babel'>

  71. import webapi from '../../api/webapi'

  72. import {mapState} from 'vuex'

  73.  
  74. export default {

  75. name: 'log',

  76. data () {

  77. return {

  78. logKeyWord: '',

  79. logLists: [],

  80. loading: false,

  81. textMap: {

  82. update: '编辑',

  83. create: '新增',

  84. delete: '删除账号'

  85. },

  86. dialogFormVisible: false,

  87. dialogLoading: false,

  88. temp: {

  89. role: ''

  90. },

  91. dialogStatus: '',

  92. disabledFlag: true // 角色是否可更改

  93. }

  94. },

  95. computed: {

  96. ...mapState({

  97. menuList: state => state.menuList.menuList

  98. })

  99. },

  100.  
  101. mounted () {

  102. this.getAllLogs()

  103. },

  104. methods: {

  105. handleEdit (index, row) {

  106. this.getRoles(row)

  107. this.temp = Object.assign({}, row) // copy obj

  108. this.dialogStatus = 'update'

  109. this.dialogFormVisible = true

  110. },

  111. async handleDelete (index, row) {

  112. try {

  113. let temp = Object.assign({}, row)

  114. const params = {

  115. roleId: temp.id

  116. }

  117. const res = await webapi.manage.roles(params)

  118. if (res.code === '200') {

  119. this.getRoleInfo()

  120. this.$message({

  121. title: '成功',

  122. message: '删除成功',

  123. type: 'success',

  124. duration: 2000

  125. })

  126. } else {

  127. this.$message({

  128. title: '失败',

  129. message: res.msg,

  130. type: 'error',

  131. duration: 2000

  132. })

  133. }

  134. } catch (e) {

  135. console.log(e)

  136. }

  137. },

  138.  
  139. async getAllLogs () {

  140. try {

  141. this.loading = true

  142. const params = {

  143. logKeyWord: this.logKeyWord

  144. }

  145. const res = await webapi.manage.allLogs(params)

  146. if (res.code === '200') {

  147. this.logLists = res.data

  148. } else {

  149. this.logLists = []

  150. }

  151. } catch (e) {

  152. console.log(e)

  153. } finally {

  154. this.loading = false

  155. }

  156. },

  157. itemClick (node) {

  158. console.log('node', JSON.stringify(node.model))

  159. }

  160. }

  161. }

  162. </script>

下拉列表

 

 

 
  1. <el-select v-model="value" placeholder="请选择">

  2. <el-option

  3. v-for="item in options"

  4. :key="item.value"

  5. :label="item.label"

  6. :value="item.value">

  7. </el-option>

  8. </el-select>

  9. </template>

  10.  
  11. <script>

  12. export default {

  13. data() {

  14. return {

  15. options: [{

  16. value: '选项1',

  17. label: '黄金糕'

  18. }, {

  19. value: '选项2',

  20. label: '双皮奶'

  21. }, {

  22. value: '选项3',

  23. label: '蚵仔煎'

  24. }, {

  25. value: '选项4',

  26. label: '龙须面'

  27. }, {

  28. value: '选项5',

  29. label: '北京烤鸭'

  30. }],

  31. value: ''

  32. }

  33. }

  34. }

  35. </script>


表格

 

 

 
  1. <template>

  2. <el-table

  3. :data="tableData"

  4. style="width: 100%">

  5. <el-table-column

  6. prop="date"

  7. label="日期"

  8. width="180">

  9. </el-table-column>

  10. <el-table-column

  11. prop="name"

  12. label="姓名"

  13. width="180">

  14. </el-table-column>

  15. <el-table-column

  16. prop="address"

  17. label="地址">

  18. </el-table-column>

  19. </el-table>

  20. </template>

  21.  
  22. <script>

  23. export default {

  24. data() {

  25. return {

  26. tableData: [{

  27. date: '2016-05-02',

  28. name: '王小虎',

  29. address: '上海市普陀区金沙江路 1518 弄'

  30. }, {

  31. date: '2016-05-04',

  32. name: '王小虎',

  33. address: '上海市普陀区金沙江路 1517 弄'

  34. }, {

  35. date: '2016-05-01',

  36. name: '王小虎',

  37. address: '上海市普陀区金沙江路 1519 弄'

  38. }, {

  39. date: '2016-05-03',

  40. name: '王小虎',

  41. address: '上海市普陀区金沙江路 1516 弄'

  42. }]

  43. }

  44. }

  45. }

  46. </script>

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

 

 

 
  1. <el-table :data='logLists' stripe style='width: 100%; margin: 0 auto; text-align:center;'>

  2. <el-table-column label='ID'>

  3. <template slot-scope='scope'>

  4. <label>{{scope.row.id}}

  5. <span></span>

  6. </label>

  7. </template>

  8. </el-table-column>

  9. <el-table-column label='时间'>

  10. <template slot-scope='scope'>

  11. <label>{{scope.row.createTime}}

  12. <span></span>

  13. </label>

  14. </template>

  15. </el-table-column>

  16. <el-table-column label='操作'>

  17. <template slot-scope='scope'>

  18. <label>{{scope.row.operateContent}}

  19. <span></span>

  20. </label>

  21. </template>

  22. </el-table-column>

  23. <el-table-column label='操作人'>

  24. <template slot-scope='scope'>

  25. <label>{{scope.row.userId}}

  26. <span></span>

  27. </label>

  28. </template>

  29. </el-table-column>

  30. <el-table-column label='操作结果'>

  31. <template slot-scope='scope'>

  32. <label>{{scope.row.displayName}}

  33. <span></span>

  34. </label>

  35. </template>

  36. </el-table-column>

  37. </el-table>

阅读更多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐