后端人員開發前端vue。
git地址：https://github.com/1065744299/vue-elment-ui
演示地址：https://1065744299.github.io/
csdn下載源碼地址：https://download.csdn.net/download/qq_25451199/11256228
這個demo主要用到vue、vueRouter、vueX、element UI、echarts等技術。主要以展示怎么使用為主。主要的功能有登錄、路由、store、報表、導出等。
這里用vue的多頁面功能，為了組件的重復使用。
開始介紹代碼：
為了打包的時候直打包一個頁面，這里對vue.config.js做了修改；代碼如下：
var projectname = process.argv[5]
var glob = require('glob')function getEntry () {var entries = {}if (process.env.NODE_ENV === 'production') {entries = {index: {// page的入口entry: 'src/modules/' + projectname + '/main.js',// 模板來源template: 'public/index.html',// 在 dist/index.html 的輸出filename: 'index.html',title: projectname,chunks: ['chunk-vendors', 'chunk-common', 'index']}}} else {var items = glob.sync('./src/modules/*/*.js')for (var i in items) {var filepath = items[i]var fileList = filepath.split('/')var fileName = fileList[fileList.length - 2]entries[fileName] = {entry: `src/modules/${fileName}/main.js`,// 模板來源template: `public/index.html`,// 在 dist/index.html 的輸出filename: `${fileName}.html`,// 提取出來的通用 chunk 和 vendor chunk。chunks: ['chunk-vendors', 'chunk-common', fileName]}}}return entries
}var pages = getEntry()
// vue.config.js
module.exports = {// 基本路徑publicPath: '/',// 輸出文件目錄// outputDir: 'dist',// webpack-dev-server 相關配置devServer: {port: 8888},// 生產禁止顯示源代碼productionSourceMap: false,// 輸出文件目錄outputDir: 'dist/' + projectname,pages: pages
}
下面開始搭建一個簡單的demo。
主要有幾個基礎的組件。
先了解下項目結構：
這里主要說組件的內容。
<template><el-container><el-header><Head :isCollapse='isCollapse' @changeCollapse="changeCollapsed" :sysName='sysName' :userInfo='homeUserInfo' @logoutHandle='logoutHandle'></Head></el-header><el-container><el-aside :class="isCollapse?'menu-collapsed':'menu-expanded'"><Menu :isCollapse='isCollapse' :defaultActive="defaultActive" :menuJson='menuJson' @selectedTab="selectedTab(arguments)"/></el-aside><el-main><div class="my-main"><Main :editableTabsValue="editableTabsValue" ref="myMain" @selectedTab="mainSelectedTab(arguments)"/></div></el-main></el-container></el-container>
</template>
<script>
import Menu from '@/components/Menu.vue'
import Head from '@/components/Head.vue'
import Main from '@/components/Main.vue'
export default {name: 'app',props: ['sysName', 'userInfo', 'menuJson'],components: {Menu,Head,Main},data () {return {// 菜單是否折疊'isCollapse': false,// 主展示區默認選項卡'editableTabsValue': '首頁',// 菜單默認選中'defaultActive': '/main/home'}},computed: {'homeUserInfo': function () {return this.userInfo}},methods: {changeCollapsed: function () {this.isCollapse = !this.isCollapse},selectedTab: function (args) {this.editableTabsValue = args[0]this.defaultActive = args[1]this.$refs.myMain.addTab(this.editableTabsValue, this.defaultActive)},mainSelectedTab: function (args) {this.editableTabsValue = args[0]this.defaultActive = args[1]},myRoute: function (index) {this.$router.push({ 'path': index })},logoutHandle: function () {this.$emit('logoutHandle')}},created: function () {this.myRoute(this.defaultActive)}
}
</script>
<style>html,body,#app,.el-container {height: 100%;}.el-header {color: #333;line-height: 60px;padding: 0 0px;}.el-aside {background-color: #eef1f6;color: #333;line-height: 200px;}.el-main {color: #333;padding: 0 0 0 0px;width: 100%;}.menu-collapsed{flex:0 0 65px;width: 65px;}.menu-expanded{flex:0 0 201px;width: 201px;}body{margin: 0px;}main {height: 100%;overflow-y: auto;}
</style>
<template><el-col :span="24" class="header"><el-col :span="10" class="logo " :class="isCollapse?'logo-collapse-width':'logo-width'">{{isCollapse?'':sysName}}<img src="../assets/w.jpg" width="66px" height="100%" v-show="isCollapse"/></el-col><el-col :span="10"><div class="tools"><i :class="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'" @click="pchangeCollapse"></i></div></el-col><el-col :span="4" class="userinfo"><el-dropdown trigger="hover"><span class="el-dropdown-link userinfo-inner"><img :src="img"/>{{name}}</span><el-dropdown-menu slot="dropdown"><el-dropdown-item>我的消息</el-dropdown-item><el-dropdown-item>設置</el-dropdown-item><el-dropdown-item @click.native="logoutHandle">退出登錄</el-dropdown-item></el-dropdown-menu></el-dropdown></el-col></el-col>
</template>
<script>
let userInfo = {name: '蘇三杰',img: 'https://raw.githubusercontent.com/taylorchen709/markdown-images/master/vueadmin/user.png'
}
export default {props: {'isCollapse': {type: Boolean,default: true},'userInfo': {type: Object,default: () => userInfo},'sysName': {type: String,default: 'WEBDEMO'}},data () {return {}},computed: {'name': function () {return this.userInfo.name},'img': function () {return this.userInfo.img}},methods: {pchangeCollapse: function () {this.$emit('changeCollapse')},logoutHandle: function () {this.$confirm('確定要退出嗎?', '提示', {confirmButtonText: '確定',cancelButtonText: '取消',type: 'warning'}).then(() => {// this.$message({// type: 'success',// message: '刪除成功!'// })this.$emit('logoutHandle')}).catch(() => {this.$message({type: 'info',message: '已取消退出'})})}}
}
</script>
<style scoped>
.header {height: 60px;line-height: 60px;background: #67C23A;color:#fff
}.userinfo {height: 60px;line-height: 60px;text-align: right;padding-right: 35px;float: right;
}.userinfo-inner {height: 60px;line-height: 60px;cursor: pointer;color:#fff;}.userinfo-inner>img {cursor: pointer;color:#fff;width: 40px;height: 40px;border-radius: 20px;margin: 10px 0px 10px 10px;float: right;}.logo {height:60px;font-size: 22px;border-color: rgba(238,241,146,0.3);border-right-width: 1px;border-right-style: solid;}.txt {color:#fff;}.logo-width{width:202px;padding-left:20px;padding-right:20px;}.logo-collapse-width{width:65px;padding-left:0px;padding-right:0px;}.tools{padding: 0px 23px;width:14px;height: 60px;line-height: 60px;cursor: pointer;}
</style>
<template><el-tabs v-model="myEditableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="goRoute"><el-tab-panev-for="(item) in editableTabs":key="item.name":label="item.title":name="item.name":myindex="item.index"><div class="mymain"><router-view/></div></el-tab-pane></el-tabs>
</template>
<script>
export default {props: ['editableTabsValue'],data () {return {editableTabs: [{title: '首頁',name: '首頁',index: '/main/home'}],myEditableTabsValue: this.editableTabsValue}},methods: {addTab (name, index) {for (var t in this.editableTabs) {if (this.editableTabs[t].name === name) {this.myEditableTabsValue = namereturn}}this.editableTabs.push({title: name,name: name,index: index})this.myEditableTabsValue = name},removeTab (targetName) {let tabs = this.editableTabslet activeName = this.myEditableTabsValue// let activeName = ''let _index = ''if (activeName === targetName) {tabs.forEach((tab, index) => {if (tab.name === targetName) {let nextTab = tabs[index + 1] || tabs[index - 1]if (nextTab) {activeName = nextTab.name_index = nextTab.index}}})}this.$router.push({ 'path': _index })this.$emit('selectedTab', activeName, _index)this.myEditableTabsValue = activeNamethis.editableTabs = tabs.filter(tab => tab.name !== targetName)},goRoute (args) {let tabs = this.editableTabslet _thisTab = tabs.filter(tab => tab.name === args.name)[0]this.$router.push({ 'path': _thisTab.index })this.$emit('selectedTab', _thisTab.name, _thisTab.index)// this.$emit('myRoute', _thisTab.index)}}
}
</script>
<style scoped>
.mymain {padding: 0 5px
}
</style>
<template><div><el-menu:default-active="defaultActive"class="el-menu-vertical-demo"@open="handleOpen"@close="handleClose":collapse="isCollapse"background-color="#eef1f6"active-text-color="#20a0ff":collapse-transition="false"text-color="#48576a":router="true"><template v-for="m in menus"><el-submenu v-if="m.type=='subMenu'" :index="m.id" :key="m.id"><template slot="title"><i :class="m.icon"></i><span slot="title">{{m.name}}</span></template><el-menu-item v-for="mi in m.submenus" :key="mi.id" :index="mi.url" :route="{path: mi.url}" @click.native="selected(mi.name, mi.url)">{{mi.name}}</el-menu-item></el-submenu><el-menu-item v-if="m.type=='menu-item'" :index="m.url" :key="m.id" :route="{path: m.url}" @click.native="selected(m.name, m.url)"><i :class="m.icon"></i><span slot="title">{{m.name}}</span></el-menu-item></template></el-menu>
</div>
</template>
<script>
let menuJson = [{id: '1',name: '首頁',type: 'menu-item',url: '/',icon: 'el-icon-star-off',submenus: []},{id: '2',name: 'TableS',type: 'subMenu',url: '',icon: 'el-icon-s-grid',submenus: [{id: '3',name: '動態table',type: 'subMenu',url: '/about',icon: ''},{id: '4',name: '拖拽table',type: 'subMenu',url: '/about1',icon: ''},{id: '5',name: '綜合table',type: 'subMenu',url: '/about2',icon: ''}]},{id: '6',name: '列表demo',type: 'subMenu',url: '',icon: 'el-icon-user',submenus: [{id: '7',name: '用戶列表',type: 'subMenu',url: '/user',icon: ''}]}
]
export default {// props: ['isCollapse', 'defaultActive', 'menuJson'],props: {'isCollapse': {type: Boolean,default: true},'defaultActive': {type: String,default: '首頁'},'menuJson': {type: Array,default: () => menuJson}},data () {return {menus: this.menuJson}},methods: {handleOpen (key, keyPath) {console.log(key, keyPath)},handleClose (key, keyPath) {console.log(key, keyPath)},selected (name, index) {this.$emit('selectedTab', name, index)}}
}
</script>
<style>.el-menu-vertical-demo:not(.el-menu--collapse) {width: 200px;}.el-menu {border-right: solid 0px #e6e6e6;}
</style>
<template>
<div><el-table :data="datas" v-bind="tableAttrs" v-on="tableEvents" :cell-style="{padding:0}" style="width: 100%;" :header-cell-style="{background:'#eef1f6',color:'#606266'}"><el-table-column v-for="(item, index) in columns" :key="index" v-bind="item"></el-table-column><slot></slot></el-table>
</div>
</template>
<script>
export default {props: ['datas', 'tableAttrs', 'tableEvents', 'columns'],methods: {}
}
</script>
<style>
.el-table__row>td {height: 30px
}
</style>
<template><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[20, 40, 80, 100]":page-size="20"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination>
</template>
<script>
export default {props: ['currentPage', 'total'],data () {return {}},methods: {handleSizeChange (val) {this.$emit('handleSizeChange', val)},handleCurrentChange (val) {this.$emit('handleCurrentChange', val)}}
}
</script>
<style></style>
- CommonPage.vue
常用主頁面組件（這個很重要，為以后直接生成頁面做準備）
<template><div><el-row :gutter="10"><el-col :span="24" v-if="formEntity"><div class="bg-purple-dark"><el-form :inline="true" :model="formInline"><template v-for="(item, index) in formEntity"><template v-if="item.template === 'input'"><el-form-item :label="item.label" :key="index"><el-input v-model="formInline[item.name]" size="small" v-bind="item"></el-input></el-form-item></template><template v-if="item.template === 'date'"><el-form-item :label="item.label" :key="index"><el-date-picker v-model="formInline[item.name]" size="small" v-bind="item"></el-date-picker></el-form-item></template><template v-if="item.template === 'select'"><el-form-item :label="item.label" :key="index"><el-select v-model="formInline[item.name]" size="small" v-bind="item"><el-option v-for="(option, index) in item.options" :key="index" :label="option.label" :value="option.value"></el-option></el-select></el-form-item></template></template><el-form-item><el-button type="primary" size="small" @click="queryF">查詢</el-button></el-form-item></el-form></div></el-col></el-row><el-row v-if="buttons && buttons.length > 0"><el-button plain size="small" v-for="(item , index) in buttons" :key="index" v-bind="item" @click="buttonClick(item.callback)">{{item.label}}</el-button></el-row><el-row v-if="tableEntity"><Table v-bind="tableEntity.options"><el-table-column v-if="tableEntity.options.operationColumn && tableEntity.options.operationColumn.length > 0" label="操作"><template scope="scope"><el-button plain v-for="(item, index) in tableEntity.options.operationColumn" :key="index" size="mini" v-bind="item" @click="tableoperationcallback(scope.$index, scope.row,item.callback)">{{item.label}}</el-button></template></el-table-column></Table></el-row><el-row v-if="tableEntity.page" style="background: #EEF1F6;"><div class="bg-purple-dark"><Page:currentPage="tableEntity.page.currentPage":total="tableEntity.page.total"@handleSizeChange="handleSizeChange"@handleCurrentChange="handleCurrentChange"/></div></el-row></div>
</template>
<script>
import Table from '@/components/Table.vue'
import Page from '@/components/Page.vue'export default {props: {// 查詢實體formEntity: {type: Array},queryFunction: {type: Function},tableEntity: {type: Object},buttons: {type: Array}},components: {Table,Page},data () {return {formInline: {}}},methods: {// 查詢方法queryF () {if (this.queryFunction) {this.queryFunction(this.formInline)}},// 列表操作事件tableoperationcallback: function (index, row, callback) {if (callback) {callback(index, row)}},// 頁面列表記錄數改表handleSizeChange (val) {if (this.tableEntity.page && this.tableEntity.page.handleSizeChange) {this.tableEntity.page.handleSizeChange(val)}},// 點擊其他頁面handleCurrentChange (val) {if (this.tableEntity.page && this.tableEntity.page.handleCurrentChange) {this.tableEntity.page.handleCurrentChange(val)}},// 按鈕點擊事件buttonClick (fun) {if (fun) {fun()}}}
}
</script>
<style scoped>.bg-purple-dark {border-radius: 4px;background: #EEF1F6;padding: 5px;}.el-form-item {margin: 5px;}.el-row {margin-bottom: 5px;}.el-form-item__label {min-width: 70px;}
</style>
上面就把主要的組件寫完了，下面就是一個應用。
這個應用使用多級路由和vuex。
<template><div id="app"><router-view/></div>
</template>
<script>
import axios from './utils/http'export default {components: {// Home},data () {return {// userInfo: userInfo,// sysName: sysName,// menuJson: menuJson}},methods: {logoutHandle: function () {// TODOconsole.log('退出')},testApi: function () {// http://10.98.3.27:8080/app/mock/data/139axios.get('http://10.98.3.27:8080/app/mock/data/139').then(response => {console.info(response)console.info(response.data)}).catch(error => {console.log(error)}).finally(() => console.log('finally'))}},created: function () {// this.testApi()this.$router.push({ 'path': '/main/home' })}
}
</script>
<style>
html, body, #app{width: 100%;
}
</style>
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
import router from './router'
import store from './store'
// import axios from 'axios'
// import VueAxios from 'vue-axios'
// import http from './utils/http'
// import VueAxios from 'vue-axios'// Vue.use(VueAxios, http)Vue.use(ElementUI)
// Vue.use(http)
Vue.config.productionTip = false
// 做攔截
router.beforeEach((to, from, next) => {// 判斷該路由是否需要登錄權限if (to.path !== '/login') {// 判斷當前的user_id是否存在 ； 登錄存入的user_idif (store.state.userInfo.name) {next()} else {next({path: '/login',// 將要跳轉路由的path作為參數，傳遞到登錄頁面query: { redirect: to.fullPath }})}} else {next()}
})new Vue({router,store,// http,render: h => h(App)
}).$mount('#app')
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'Vue.use(Router)export default new Router({mode: 'history',base: process.env.BASE_URL,routes: [// {// path: '/home',// name: 'home',// component: Home// },// {// path: '/about',// name: 'about',// // route level code-splitting// // this generates a separate chunk (about.[hash].js) for this route// // which is lazy-loaded when the route is visited.// component: () => import(/* webpackChunkName: "about" */ './views/About.vue')// },// {// path: '/user',// name: 'user',// component: () => import('./views/User.vue')// },{path: '/login',name: 'login',component: () => import('./views/Login.vue')},{path: '/main',name: 'main',component: () => import('./views/MyMain.vue'),children: [{path: 'home',name: 'home',component: Home},{path: 'about',name: 'about',// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () => import(/* webpackChunkName: "about" */ './views/About.vue')},{path: 'user',name: 'user',component: () => import('./views/User.vue')},{path: 'order',name: 'order',component: () => import('./views/Order.vue')},{path: 'echarts',name: 'echarts',component: () => import('./views/Echarts.vue')},{path: 'export',name: 'export',component: () => import('./views/Export.vue')},{path: 'about1',name: 'about1'},{path: 'about2',name: 'about2'},{path: 'ioc',name: 'ioc'}]}]
})
import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state: {userInfo: {// name: 'Vuex',// img: 'https://raw.githubusercontent.com/taylorchen709/markdown-images/master/vueadmin/user.png'}},mutations: {login (state, user) {state.userInfo = user}},actions: {}
})
- http.js
這里使用axios和后臺交互，具體業務請自己完善。這里沒有具體的使用
import axios from 'axios'
// import {Loading, Message} from 'element-ui'
// import store from '../store'
// import VueAxios from 'vue-axios'
// import Vue from 'vue'// Vue.use(VueAxios, axios)/*** 提示函數* 禁止點擊蒙層、顯示一秒后關閉*/
const tip = msg => {
// Message({
// message: msg,
// duration: 1000,
// forbidClick: true
// })
}/**
* 跳轉登錄頁
* 攜帶當前頁面路由，以期在登錄頁面完成登錄后返回當前頁面
*/
const toLogin = () => {// router.replace({// path: '/login',// query: {// redirect: router.currentRoute.fullPath// }// })
}/**
* 請求失敗后的錯誤統一處理
* @param {Number} status 請求失敗的狀態碼
*/
const errorHandle = (status, other) => {// 狀態碼判斷switch (status) {// 401: 未登錄狀態，跳轉登錄頁case 401:toLogin()break// 403 token過期// 清除token并跳轉登錄頁case 403:tip('登錄過期，請重新登錄')localStorage.removeItem('token')// store.commit('loginSuccess', null)setTimeout(() => {toLogin()}, 1000)break// 404請求不存在case 404:tip('請求的資源不存在')breakdefault:console.log(other)}
}// 創建axios實例
var instance = axios.create({ timeout: 1000 * 12 })
// 設置post請求頭
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
/**
* 請求攔截器
* 每次請求前，如果存在token則在請求頭中攜帶token
*/
instance.interceptors.request.use(config => {// 登錄流程控制中，根據本地是否存在token判斷用戶的登錄情況// 但是即使token存在，也有可能token是過期的，所以在每次的請求頭中攜帶token// 后臺根據攜帶的token判斷用戶的登錄情況，并返回給我們對應的狀態碼// 而后我們可以在響應攔截器中，根據狀態碼進行一些統一的操作。// const token = store.state.token// token && (config.headers.Authorization = token)console.log('interceptors')return config},error => Promise.error(error))// 響應攔截器
instance.interceptors.response.use(// 請求成功res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res),// 請求失敗error => {const { response } = errorif (response) {// 請求已發出，但是不在2xx的范圍errorHandle(response.status, response.data.message)return Promise.reject(response)} else {// 處理斷網的情況// eg:請求超時或斷網時，更新state的network狀態// network狀態在app.vue中控制著一個全局的斷網提示組件的顯示隱藏// 關于斷網組件中的刷新重新獲取數據，會在斷網組件中說明// store.commit('changeNetwork', false)}})export default instance
<template><div class="about"><h1>This is an about page</h1></div>
</template>
<template><div><el-row :gutter="20" class="echarts-row"><el-col :span="6"><div id = "echartss" class="echarts-div" ref="myEchart"></div></el-col><el-col :span="6"><div id = "echartss1" class="echarts-div" ref="myEchart1"></div></el-col><el-col :span="6"><div id = "echartss2" class="echarts-div" ref="myEchart2"></div></el-col><el-col :span="6"><div id = "echartss3" class="echarts-div" ref="myEchart3"></div></el-col></el-row><el-row :gutter="20" class="echarts-row"><el-col :span="6"><div id = "echartss4" class="echarts-div" ref="myEchart4"></div></el-col><el-col :span="6"><div id = "echartss5" class="echarts-div" ref="myEchart5"></div></el-col><el-col :span="6"><div id = "echartss6" class="echarts-div" ref="myEchart6"></div></el-col><el-col :span="6"><div id = "echartss7" class="echarts-div" ref="myEchart7"></div></el-col></el-row><!-- <el-row :gutter="20" class="echarts-row"><el-col :span="6"><div id = "echartss8" class="echarts-div" ref="myEchart8"></div></el-col><el-col :span="6"><div id = "echartss9" class="echarts-div" ref="myEchart9"></div></el-col><el-col :span="6"><div id = "echartss10" class="echarts-div" ref="myEchart10"></div></el-col><el-col :span="6"><div id = "echartss11" class="echarts-div" ref="myEchart11"></div></el-col></el-row><el-row :gutter="20" class="echarts-row"><el-col :span="6"><div id = "echartss12" class="echarts-div" ref="myEchart12"></div></el-col><el-col :span="6"><div id = "echartss13" class="echarts-div" ref="myEchart13"></div></el-col><el-col :span="6"><div id = "echartss14" class="echarts-div" ref="myEchart14"></div></el-col><el-col :span="6"><div id = "echartss15" class="echarts-div" ref="myEchart15"></div></el-col></el-row> --></div>
</template>
<script>
import echarts from 'echarts'
let data = []
for (var i = 0; i <= 360; i++) {var t = i / 180 * Math.PIvar r = Math.sin(2 * t) * Math.cos(2 * t)data.push([r, i])
}
export default {// 掛載前初始化echarts實例mounted: function () {// 基于準備好的dom，初始化echarts實例this.myChart = echarts.init(this.$refs.myEchart)// 繪制圖表，this.echarts1_option是數據this.myChart.setOption(this.echarts_option)this.myChart1 = echarts.init(this.$refs.myEchart1)this.myChart1.setOption(this.echarts1_option)this.myChart2 = echarts.init(this.$refs.myEchart2)this.myChart2.setOption(this.echarts2_option)this.myChart3 = echarts.init(this.$refs.myEchart3)this.myChart3.setOption(this.echarts3_option)this.myChart4 = echarts.init(this.$refs.myEchart4)this.myChart4.setOption(this.echarts4_option)},data () {return {echarts4_option: {tooltip: {trigger: 'item',formatter: '{a} <br/>{b}: {c} (ozvdkddzhkzd%)'},legend: {orient: 'vertical',x: 'left',data: ['直接訪問', '郵件營銷', '聯盟廣告', '視頻廣告', '搜索引擎']},series: [{name: '訪問來源',type: 'pie',radius: ['50%', '70%'],avoidLabelOverlap: false,label: {normal: {show: false,position: 'center'},emphasis: {show: true,textStyle: {fontSize: '30',fontWeight: 'bold'}}},labelLine: {normal: {show: false}},data: [{ value: 335, name: '直接訪問' },{ value: 310, name: '郵件營銷' },{ value: 234, name: '聯盟廣告' },{ value: 135, name: '視頻廣告' },{ value: 1548, name: '搜索引擎' }]}]},echarts3_option: {title: {text: '簡單柱狀圖'},xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: 'bar'}]},echarts2_option: {title: {text: '極坐標雙數值軸'},legend: {data: ['line']},polar: {center: ['50%', '54%']},tooltip: {trigger: 'axis',axisPointer: {type: 'cross'}},angleAxis: {type: 'value',startAngle: 0},radiusAxis: {min: 0},series: [{coordinateSystem: 'polar',name: 'line',type: 'line',showSymbol: false,data: data}],animationDuration: 2000},echarts_option: {title: {text: '折線圖'},xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line'}]},echarts1_option: {title: {text: '折線圖堆疊'},tooltip: {trigger: 'axis'},// legend: {// data: ['郵件營銷', '聯盟廣告', '視頻廣告', '直接訪問', '搜索引擎']// },grid: {left: '3%',right: '4%',bottom: '3%',containLabel: true},toolbox: {feature: {saveAsImage: {}}},xAxis: {type: 'category',boundaryGap: false,data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']},yAxis: {type: 'value'},series: [{name: '郵件營銷',type: 'line',stack: '總量',data: [120, 132, 101, 134, 90, 230, 210]},{name: '聯盟廣告',type: 'line',stack: '總量',data: [220, 182, 191, 234, 290, 330, 310]},{name: '視頻廣告',type: 'line',stack: '總量',data: [150, 232, 201, 154, 190, 330, 410]},{name: '直接訪問',type: 'line',stack: '總量',data: [320, 332, 301, 334, 390, 330, 320]},{name: '搜索引擎',type: 'line',stack: '總量',data: [820, 932, 901, 934, 1290, 1330, 1320]}]}}}
}
</script>
<style scoped>
.echarts-row {height: 300px;
}
.echarts-div {width: 100%;height: 300px;
}
</style>
- Export.vue
這里有一個導出，和模擬修改用戶信息的按鈕
<template><div><el-button type='success' plain size='small' @click='export2Excel'>導出excel</el-button><el-button type='success' plain size='small' @click='updateUser'>修改登錄用戶</el-button></div>
</template>
<script>
// import Blob from '@/assets/excel/Blob'
// import Export2Excel from '@/assets/excel/Export2Excel.js'
export default {data () {return {tableData: [{ 'index': '0', 'nickName': '沙灘擱淺我們的舊時光', 'name': '小明' },{ 'index': '1', 'nickName': '女人天生高貴', 'name': '小紅' },{ 'index': '2', 'nickName': '海是彩色的灰塵', 'name': '小蘭' }]}},methods: {export2Excel: function () {require.ensure([], () => {const { exportJsonToExcel } = require('@/assets/excel/Export2Excel')const tHeader = ['序號', '昵稱', '姓名']// 上面設置Excel的表格第一行的標題const filterVal = ['index', 'nickName', 'name']// 上面的index、nickName、name是tableData里對象的屬性let list = []// const list = this.tableDatalet d = { 'index': '0', 'nickName': '沙灘擱淺我們的舊時光', 'name': '小明' }for (let a = 0; a < 100000; a++) {list.push(d)}// 把data里的tableData存到listconst data = this.formatJson(filterVal, list)// console.log(data)exportJsonToExcel(tHeader, data, '列表excel')})},formatJson (filterVal, jsonData) {return jsonData.map(v => filterVal.map(j => v[j]))},updateUser () {let userInfo = {name: 'UpdateUser',img: 'https://raw.githubusercontent.com/taylorchen709/markdown-images/master/vueadmin/user.png'}this.$store.commit('login', userInfo)}}
}
</script>
<template><el-row ><el-col :span="24" class="disc"><h3>關于本DEMO</h3><div>后端工程師寫vue之路。</div><div>使用vue、element ui作為基礎的腳手架。在這個基礎上進一步的做了優化，使得在以后得開發過程中只關注業務，不需要考慮整體的結構。</div></el-col><el-col :span="24" class="disc"><h3>啟動</h3><div>npm run serve 默認啟動<br>npm run serve-dev 啟動dev環境<br>npm run serve-local 啟動local環境</div></el-col><el-col :span="24" class="disc"><h3>打包</h3><div>npm run build 全部工程打包<br>npm run build-test demo 指定環境和項目打包<br>npm run build-prod demo 指定環境和項目打包</div></el-col></el-row>
</template><script>
export default {
}
</script>
<style>
.disc {padding-left: 10px
}
</style>
<template><div class="login-main"><el-row class="login"><el-col :span="4" :offset="6"><div class="login-info"><div>VUE</div><div>VUEX</div><div>router</div><div>element UI</div><div>echarts</div><div>......</div></div></el-col><el-col :span="6" :offset="3"><div class="login-div"><h3>登錄</h3><el-form :model="login" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="用戶名稱" prop="name"><el-input v-model="login.name" ></el-input></el-form-item><el-form-item label="登錄密碼" prop="pwd"><el-input v-model="login.pwd"></el-input></el-form-item><el-form-item><el-button type="success" @click="updateUser('ruleForm')">模擬登錄</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item></el-form></div></el-col></el-row></div>
</template>
<script>
export default {data () {return {'login': {'name': '','pwd': ''},rules: {name: [{ required: true, message: '請輸入用戶名稱', trigger: 'blur' },{ min: 5, max: 20, message: '長度在 5 到 20 個字符', trigger: 'blur' }],pwd: [{ required: true, message: '請輸入密碼', trigger: 'blur' },{ min: 6, max: 20, message: '長度在 6 到 20 個字符', trigger: 'blur' }]}}},methods: {updateUser (formName) {this.$refs[formName].validate((valid) => {if (valid) {let userInfo = {name: this.login.name,img: 'https://raw.githubusercontent.com/taylorchen709/markdown-images/master/vueadmin/user.png'}this.$store.commit('login', userInfo)// 如果存在參數if (this.$route.query.redirect) {let redirect = this.$route.query.redirect// 則跳轉至進入登錄頁前的路由this.$router.push(redirect)} else {// 否則跳轉至首頁this.$router.push('/main/home')}} else {console.log('error submit!!')return false}})},resetForm (formName) {this.$refs[formName].resetFields()}}
}
</script>
<style>
.login-main{width: 100%;height: 100%;
}
.login{margin-top: 15%;background-color: #67C23A
}
.login-info{height: 100%;padding: 20px 0 0 0;
}
.login-info>div{margin-bottom: 20px;font-size: 20px;
}
.login-div{padding: 20px 60px 40px 40px;background-color: #eef1f6
}body{margin: 0px;}
</style>
<template><div id="app"><Home :sysName='sysName' :userInfo='userInfo' :menuJson='menuJson' @logoutHandle='logoutHandle'/><!-- <router-view/> --></div>
</template>
<script>
import Home from '@/components/Home.vue'
import axios from '../utils/http'
// 用戶
// let userInfo = {
// name: '蘇三杰',
// img: 'https://raw.githubusercontent.com/taylorchen709/markdown-images/master/vueadmin/user.png'
// }
// 系統名稱
let sysName = 'WXD-DEMO'
// 菜單
let menuJson = [{id: '1',name: '首頁',type: 'menu-item',url: '/main/home',icon: 'el-icon-star-off',submenus: []},{id: '2',name: 'TableS',type: 'subMenu',url: '',icon: 'el-icon-s-grid',submenus: [{id: '3',name: '動態table',type: 'subMenu',url: '/main/about',icon: ''},{id: '4',name: '拖拽table',type: 'subMenu',url: '/main/about1',icon: ''},{id: '5',name: '綜合table',type: 'subMenu',url: '/main/about2',icon: ''}]},{id: '6',name: '列表demo',type: 'subMenu',url: '',icon: 'el-icon-user',submenus: [{id: '7',name: '用戶列表',type: 'subMenu',url: '/main/user',icon: ''},{id: '8',name: '訂單列表',type: 'subMenu',url: '/main/order',icon: ''}]},{id: '9',name: '工具demo',type: 'subMenu',url: '',icon: 'el-icon-setting',submenus: [{id: '10',name: '常用報表',type: 'subMenu',url: '/main/echarts',icon: ''},{id: '11',name: '常用圖標',type: 'subMenu',url: '/main/ioc',icon: ''},{id: '12',name: '導出demo',type: 'subMenu',url: '/main/export',icon: ''}]}
]export default {components: {Home},data () {return {// 'userInfo': this.$store.state.userInfo,'sysName': sysName,'menuJson': menuJson}},computed: {'userInfo': function () {return this.$store.state.userInfo}},methods: {logoutHandle: function () {// TODOconsole.log('退出')this.$store.commit('login', {})this.$router.push({ 'path': '/login' })},testApi: function () {// http://10.98.3.27:8080/app/mock/data/139axios.get('http://10.98.3.27:8080/app/mock/data/139').then(response => {console.info(response)console.info(response.data)}).catch(error => {console.log(error)}).finally(() => console.log('finally'))}},created: function () {// this.testApi()// this.$router.push({ 'path': '/login' })console.log(this.$store.state)}
}
</script>
<style>
</style>
<template><CommonPage :formEntity="formEntity" :queryFunction="queryF" :tableEntity="tableEntity" :buttons="buttons"></CommonPage>
</template>
<script>
import CommonPage from '@/components/CommonPage.vue'
// 查詢表單數組
let formEntityDemo = [{template: 'input',type: 'string',name: 'name',label: '用戶名',placeholder: '用戶名'},{template: 'input',type: 'number',name: 'age',label: '年齡',placeholder: '年齡'},{template: 'date',type: 'date',name: 'birthday',label: '生日',placeholder: '生日'},{template: 'date',type: 'month',name: 'month',label: '月份',placeholder: '月份'},{template: 'date',type: 'monthrange',name: 'monthrange',label: '月份區間','range-separator': '至','start-placeholder': '開始月份','end-placeholder': '結束月份',placeholder: '月份區間'},{template: 'date',type: 'daterange',name: 'qutime',label: '日期區間','start-placeholder': '開始日期','end-placeholder': '結束日期','default-time': ['00:00:00', '23:59:59'],placeholder: '日期區間'},{template: 'select',type: 'select',name: 'region',label: '活動區域',placeholder: '活動區域',options: [{label: '區域一',value: 'shanghai'},{label: '區域二',value: 'beijing'},{label: '區域三',value: 'shanxi'}]}
]
// 數據列表
let users = [{'id': 1,'name': '劉娟','sex': 1,'age': 23,'addr': '香港特別行政區 新界 西貢區','orderNo': '001','amount': 200},{'id': 1,'name': '劉娟','sex': 0,'age': 23,'addr': '香港特別行政區 新界 西貢區','orderNo': '002','amount': 200},{'id': 1,'name': '劉娟','sex': 1,'age': 23,'addr': '香港特別行政區 新界 西貢區','orderNo': '003','amount': 200},{'id': 1,'name': '劉娟','sex': 0,'age': 23,'addr': '香港特別行政區 新界 西貢區','orderNo': '004','amount': 200},{'id': 1,'name': '劉娟','sex': 1,'age': 23,'addr': '香港特別行政區 新界 西貢區','orderNo': '005','amount': 200},{'id': 1,'name': '劉娟','sex': 1,'age': 23,'addr': '香港特別行政區 新界 西貢區','orderNo': '006','amount': 200},{'id': 1,'name': '劉娟','sex': 0,'age': 23,'addr': '香港特別行政區 新界 西貢區','orderNo': '007','amount': 200},{'id': 1,'name': '劉娟','sex': 1,'age': 23,'addr': '香港特別行政區 新界 西貢區','orderNo': '008','amount': 200},{'id': 1,'name': '劉娟','sex': 0,'age': 23,'addr': '香港特別行政區 新界 西貢區','orderNo': '009','amount': 200},{'id': 1,'name': '劉娟','sex': 1,'age': 23,'addr': '香港特別行政區 新界 西貢區','orderNo': '010','amount': 200},{'id': 1,'name': '劉娟','sex': 1,'age': 23,'addr': '香港特別行政區 新界 西貢區','orderNo': '011','amount': 200},{'id': 1,'name': '劉娟','sex': 0,'age': 23,'addr': '香港特別行政區 新界 西貢區','orderNo': '012','amount': 200},{'id': 1,'name': '劉娟','sex': 1,'age': 23,'addr': '香港特別行政區 新界 西貢區','orderNo': '012','amount': 200},{'id': 1,'name': '劉娟','sex': 0,'age': 23,'addr': '香港特別行政區 新界 西貢區','orderNo': '012','amount': 200},{'id': 1,'name': '劉娟','sex': 1,'age': 23,'addr': '香港特別行政區 新界 西貢區','orderNo': '012','amount': 200},{'id': 1,'name': '劉娟','sex': 1,'age': 23,'addr': '香港特別行政區 新界 西貢區','orderNo': '012','amount': 200},{'id': 1,'name': '劉娟','sex': 1,'age': 23,'addr': '香港特別行政區 新界 西貢區','orderNo': '012','amount': 200},{'id': 1,'name': '劉娟','sex': 1,'age': 23,'addr': '香港特別行政區 新界 西貢區','orderNo': '012','amount': 200},{'id': 1,'name': '劉娟','sex': 1,'age': 23,'addr': '香港特別行政區 新界 西貢區','orderNo': '012','amount': 200},{'id': 1,'name': '劉娟','sex': 1,'age': 23,'addr': '香港特別行政區 新界 西貢區','orderNo': '012','amount': 200}
]
// 列表屬性
let tableDemo = {page: {currentPage: 1,total: 1400,// 改變每頁記錄數handleSizeChange: (size) => {console.log('order頁面' + size)},// 點擊其他頁面handleCurrentChange: (currentPage) => {console.log('order頁面' + currentPage)}},options: {// 數據'datas': users,// 表格屬性tableAttrs: {'size': 'small','border': true},// 表格事件tableEvents: {'select': function (selection, row) {console.log(selection)console.log('order頁面' + selection)}},// 列 不包括操作列columns: [{'type': 'selection','width': '55'},{'type': 'index','label': '序號','width': '60'},{'prop': 'orderNo','label': '訂單號','width': '120'},{'prop': 'amount','label': '金額','width': '120'},{'prop': 'name','label': '姓名','width': '120'},{'prop': 'sex','label': '性別','width': '120','formatter': function (row, column) {return row.sex === 1 ? '男' : row.sex === 0 ? '女' : '未知'}},{'prop': 'age','label': '年齡','width': '120'},{'prop': 'addr','label': '收貨地址','width': '250'}],// 操作列operationColumn: [{'label': '編輯','type': 'primary','callback': (index, row) => {console.log(row)}},{'label': '查看','type': 'danger','callback': (index, row) => {console.log(row)}}]}
}
// 按鈕
let buttons = [{'label': '添加訂單','type': 'primary','callback': () => {console.log('添加訂單')}},{'label': '修改訂單','type': 'warning','callback': () => {console.log('修改訂單')}},{'label': '刪除訂單','type': 'danger','callback': () => {console.log('刪除訂單')}},{'label': '訂單詳情','type': 'info','callback': () => {console.log('訂單詳情')}}
]
export default {components: {CommonPage},data () {return {formEntity: formEntityDemo,tableEntity: tableDemo,buttons: buttons}},methods: {// 查詢方法queryF: function (a) {// 查詢的實體console.log(a)}}
}
</script>
<template><div><el-row :gutter="10"><el-col :span="24"><div class="bg-purple-dark"><el-form :inline="true" :model="formInline"><el-form-item label="用戶名"><el-input v-model="formInline.user" size="small" placeholder="用戶名"></el-input></el-form-item><el-form-item label="用戶名"><el-input v-model="formInline.user" size="small" placeholder="用戶名"></el-input></el-form-item><el-form-item label="用戶名"><el-input v-model="formInline.user" size="small" placeholder="用戶名"></el-input></el-form-item><el-form-item label="用戶名"><el-input v-model="formInline.user" size="small" placeholder="用戶名"></el-input></el-form-item><el-form-item label="用戶名"><el-input v-model="formInline.user" size="small" placeholder="用戶名"></el-input></el-form-item><el-form-item label="活動區域"><el-select v-model="formInline.region" size="small" placeholder="活動區域"><el-option label="區域一" value="shanghai"></el-option><el-option label="區域二" value="beijing"></el-option></el-select></el-form-item><el-form-item><el-button type="primary" size="small">查詢</el-button></el-form-item></el-form></div></el-col></el-row><el-row><el-button plain size="small">樸素按鈕</el-button><el-button type="primary" plain size="small" @click="userAdd">添加用戶</el-button><el-button type="success" plain size="small">成功按鈕</el-button><el-button type="info" plain size="small">信息按鈕</el-button><el-button type="warning" plain size="small">警告按鈕</el-button><el-button type="danger" plain size="small" @click="userDel">刪除用戶</el-button></el-row><el-row><Table v-bind="options"><el-table-column label="操作" width="150"><template scope="scope"><el-button size="mini" @click="handleEdit(scope.$index, scope.row)">編輯</el-button><el-button plain type="danger" size="mini" @click="handleDel(scope.$index, scope.row)">刪除</el-button></template></el-table-column></Table></el-row><el-row style="background: #f2f2f2;"><div class="bg-purple-dark"><Page:currentPage="currentPage":total="total"@handleSizeChange="handleSizeChange"@handleCurrentChange="handleCurrentChange"/></div></el-row><UserAdd ref="userAddView" :pdialogFormVisible="pdialogFormVisible"/></div>
</template>
<script>
import Table from '@/components/Table.vue'
import Page from '@/components/Page.vue'
import UserAdd from './UserAdd.vue'
let users = [{'id': 1,'name': '劉娟','sex': 1,'age': 23,'addr': '香港特別行政區 新界 西貢區'},{'id': 1,'name': '劉娟','sex': 0,'age': 23,'addr': '香港特別行政區 新界 西貢區'},{'id': 1,'name': '劉娟','sex': 1,'age': 23,'addr': '香港特別行政區 新界 西貢區'},{'id': 1,'name': '劉娟','sex': 0,'age': 23,'addr': '香港特別行政區 新界 西貢區'},{'id': 1,'name': '劉娟','sex': 1,'age': 23,'addr': '香港特別行政區 新界 西貢區'},{'id': 1,'name': '劉娟','sex': 1,'age': 23,'addr': '香港特別行政區 新界 西貢區'},{'id': 1,'name': '劉娟','sex': 0,'age': 23,'addr': '香港特別行政區 新界 西貢區'},{'id': 1,'name': '劉娟','sex': 1,'age': 23,'addr': '香港特別行政區 新界 西貢區'},{'id': 1,'name': '劉娟','sex': 0,'age': 23,'addr': '香港特別行政區 新界 西貢區'},{'id': 1,'name': '劉娟','sex': 1,'age': 23,'addr': '香港特別行政區 新界 西貢區'},{'id': 1,'name': '劉娟','sex': 1,'age': 23,'addr': '香港特別行政區 新界 西貢區'},{'id': 1,'name': '劉娟','sex': 0,'age': 23,'addr': '香港特別行政區 新界 西貢區'},{'id': 1,'name': '劉娟','sex': 1,'age': 23,'addr': '香港特別行政區 新界 西貢區'},{'id': 1,'name': '劉娟','sex': 0,'age': 23,'addr': '香港特別行政區 新界 西貢區'},{'id': 1,'name': '劉娟','sex': 1,'age': 23,'addr': '香港特別行政區 新界 西貢區'}
]
// let selectedIds = []
export default {components: {Table,Page,UserAdd},data () {var _this = thisreturn {pdialogFormVisible: false,currentPage: 4,total: 1400,selectedIds: [],formInline: {user: '',region: ''},options: {'datas': users,tableAttrs: {'size': 'small','border': true},tableEvents: {'select': function (selection, row) {_this.selectedIds = selection.map(u => {return u.id})}},columns: [{'type': 'selection','width': '55'},{'type': 'index','label': '序號','width': '60'},{'prop': 'name','label': '姓名','width': '120'},{'prop': 'sex','label': '性別','width': '120','formatter': function (row, column) {return row.sex === 1 ? '男' : row.sex === 0 ? '女' : '未知'}},{'prop': 'age','label': '年齡','width': '120'},{'prop': 'addr','label': '地址','width': '250'}]}}},methods: {userDel () {// 獲取選中的用戶idif (this.selectedIds.length === 0) {this.$alert('請選擇要刪除的用戶', '提示', {confirmButtonText: '確定',callback: function () {// do something}})return}this.$confirm('此操作將永久刪除該用戶, 是否繼續?', '提示', {confirmButtonText: '確定',cancelButtonText: '取消',type: 'warning'}).then(() => {// 正真的刪除this.$message({type: 'success',message: '刪除成功!'})}).catch(() => {this.$message({type: 'info',message: '已取消刪除'})})},userAdd () {this.$refs.userAddView.opendialog()// this.pdialogFormVisible = true// console.log(this.pdialogFormVisible)},handleEdit: function (index, row) {console.log(index)console.log(row)},handleSizeChange (val) {console.log('每頁 條' + val)},handleCurrentChange (val) {console.log('當前頁: ' + val)},setSelectedIds (ids) {this.selectedIds = ids}}
}
</script>
<style scoped>.bg-purple-dark {border-radius: 4px;background: #EEF1F6;padding: 10px;}.el-form-item {margin: 5px;}.el-row {margin-bottom: 5px;}
</style>
<template><el-dialog title="收貨地址" :visible.sync="dialogFormVisible"><el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="活動名稱" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item><el-form-item label="活動區域" prop="region"><el-select v-model="ruleForm.region" placeholder="請選擇活動區域"><el-option label="區域一" value="shanghai"></el-option><el-option label="區域二" value="beijing"></el-option></el-select></el-form-item><el-form-item label="活動時間" required><el-col :span="11"><el-form-item prop="date1"><el-date-picker type="date" placeholder="選擇日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker></el-form-item></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-form-item prop="date2"><el-time-picker placeholder="選擇時間" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker></el-form-item></el-col></el-form-item><el-form-item label="即時配送" prop="delivery"><el-switch v-model="ruleForm.delivery"></el-switch></el-form-item><el-form-item label="活動性質" prop="type"><el-checkbox-group v-model="ruleForm.type"><el-checkbox label="美食/餐廳線上活動" name="type"></el-checkbox><el-checkbox label="地推活動" name="type"></el-checkbox><el-checkbox label="線下主題活動" name="type"></el-checkbox><el-checkbox label="單純品牌曝光" name="type"></el-checkbox></el-checkbox-group></el-form-item><el-form-item label="特殊資源" prop="resource"><el-radio-group v-model="ruleForm.resource"><el-radio label="線上品牌商贊助"></el-radio><el-radio label="線下場地免費"></el-radio></el-radio-group></el-form-item><el-form-item label="活動形式" prop="desc"><el-input type="textarea" v-model="ruleForm.desc"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button @click="resetForm('ruleForm')">重置</el-button><el-button type="primary" @click="submitForm('ruleForm')">確 定</el-button></div></el-dialog>
</template>
<script>
export default {props: ['pdialogFormVisible'],data () {return {'dialogFormVisible': this.pdialogFormVisible,ruleForm: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''},rules: {name: [{ required: true, message: '請輸入活動名稱', trigger: 'blur' },{ min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }],region: [{ required: true, message: '請選擇活動區域', trigger: 'change' }],date1: [{ type: 'date', required: true, message: '請選擇日期', trigger: 'change' }],date2: [{ type: 'date', required: true, message: '請選擇時間', trigger: 'change' }],type: [{ type: 'array', required: true, message: '請至少選擇一個活動性質', trigger: 'change' }],resource: [{ required: true, message: '請選擇活動資源', trigger: 'change' }],desc: [{ required: true, message: '請填寫活動形式', trigger: 'blur' }]}}},methods: {submitForm (formName) {this.$refs[formName].validate((valid) => {if (valid) {alert('submit!')this.dialogFormVisible = false} else {console.log('error submit!!')return false}})},resetForm (formName) {this.$refs[formName].resetFields()},opendialog () {if (this.dialogFormVisible) {return}this.dialogFormVisible = true}},created () {}
}
</script>
OK、主要的代碼就完成了。
啟動后的效果圖：
以上就完成了一個簡單的demo。
源碼地址：https://github.com/1065744299/vue-elment-ui
如果對你有幫助，可以請作者喝杯咖啡:
總結
以上是生活随笔為你收集整理的vue2+element ui的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
