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='width: 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="width: 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='width: 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>
相关文章
相关标签/搜索