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: '<App/>',
  components: { App }
})
 
Vue.use({
  vm
})

2. 应用实例

 

文本框

<el-input v-model="input" placeholder="请输入内容"></el-input>
 
<script>
export default {
  data() {
    return {
      input: ''
    }
  }
}
</script>

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

<template>
  <section>
    <div  v-loading='loading'>
      <el-col :span='24' class='toolbar' style='padding-bottom: 0px;'>
        <el-form :inline='true'>
          <el-form-item>
            <el-input v-model='logKeyWord' placeholder='请输入关键字' clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type='primary' v-on:click='getAllLogs'>查询</el-button>
          </el-form-item>
 
        </el-form>
      </el-col>
 
      <el-table :data='logLists' stripe style=' 100%; margin: 0 auto; text-align:center;'>
        <el-table-column label='ID'>
          <template slot-scope='scope'>
            <label>{{scope.row.id}}
              <span></span>
            </label>
          </template>
        </el-table-column>
         <el-table-column label='时间'>
          <template slot-scope='scope'>
            <label>{{scope.row.createTime}}
              <span></span>
            </label>
          </template>
         </el-table-column>
          <el-table-column label='操作'>
           <template slot-scope='scope'>
             <label>{{scope.row.operateContent}}
               <span></span>
             </label>
           </template>
          </el-table-column>
          <el-table-column label='操作人'>
            <template slot-scope='scope'>
              <label>{{scope.row.userId}}
                <span></span>
              </label>
            </template>
          </el-table-column>
         <el-table-column label='操作结果'>
            <template slot-scope='scope'>
              <label>{{scope.row.displayName}}
                <span></span>
              </label>
            </template>
          </el-table-column>
      </el-table>
 
    </div>
  </section>
</template>
<style rel='stylesheet/scss' lang='scss'>
.el-table thead tr th {
  background-color: rgba(28,148,255,0.6) !important;
  color: #fff;
}
.el-table th{
  text-align: center;
}
.addBtn {
  background: #fff;
  color: #1C94FF;
}
</style>
<script lang='babel'>
import webapi from '../../api/webapi'
import {mapState} from 'vuex'
 
export default {
  name: 'log',
  data () {
    return {
      logKeyWord: '',
      logLists: [],
      loading: false,
      textMap: {
        update: '编辑',
        create: '新增',
        delete: '删除账号'
      },
      dialogFormVisible: false,
      dialogLoading: false,
      temp: {
        role: ''
      },
      dialogStatus: '',
      disabledFlag: true // 角色是否可更改
    }
  },
  computed: {
    ...mapState({
      menuList: state => state.menuList.menuList
    })
  },
 
  mounted () {
    this.getAllLogs()
  },
  methods: {
    handleEdit (index, row) {
      this.getRoles(row)
      this.temp = Object.assign({}, row) // copy obj
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
    },
    async handleDelete (index, row) {
      try {
        let temp = Object.assign({}, row)
        const params = {
          roleId: temp.id
        }
        const res = await webapi.manage.roles(params)
        if (res.code === '200') {
          this.getRoleInfo()
          this.$message({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
        } else {
          this.$message({
            title: '失败',
            message: res.msg,
            type: 'error',
            duration: 2000
          })
        }
      } catch (e) {
        console.log(e)
      }
    },
 
    async getAllLogs () {
      try {
        this.loading = true
        const params = {
          logKeyWord: this.logKeyWord
        }
        const res = await webapi.manage.allLogs(params)
        if (res.code === '200') {
          this.logLists = res.data
        } else {
          this.logLists = []
        }
      } catch (e) {
        console.log(e)
      } finally {
        this.loading = false
      }
    },
    itemClick (node) {
      console.log('node', JSON.stringify(node.model))
    }
  }
}
</script>

　下拉列表

<el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>
 
<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }
    }
  }
</script>

　　

<template>
    <el-table
      :data="tableData"
      style=" 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
  </template>
 
  <script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      }
    }
  </script>

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

<el-table :data='logLists' stripe style=' 100%; margin: 0 auto; text-align:center;'>
        <el-table-column label='ID'>
          <template slot-scope='scope'>
            <label>{{scope.row.id}}
              <span></span>
            </label>
          </template>
        </el-table-column>
         <el-table-column label='时间'>
          <template slot-scope='scope'>
            <label>{{scope.row.createTime}}
              <span></span>
            </label>
          </template>
         </el-table-column>
          <el-table-column label='操作'>
           <template slot-scope='scope'>
             <label>{{scope.row.operateContent}}
               <span></span>
             </label>
           </template>
          </el-table-column>
          <el-table-column label='操作人'>
            <template slot-scope='scope'>
              <label>{{scope.row.userId}}
                <span></span>
              </label>
            </template>
          </el-table-column>
         <el-table-column label='操作结果'>
            <template slot-scope='scope'>
              <label>{{scope.row.displayName}}
                <span></span>
              </label>
            </template>
          </el-table-column>

　　

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=' 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=" 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=' 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>