https://blog.csdn.net/itcats_cn/article/details/85644226
本文主要從幾個方面快速入門ElementUI
1、什么是ElementUI ？ 掌握elementUI腳手架搭建
2、掌握elementUI的table組件的使用，實現列表功能
3、掌握elementUI的pagination組件的使用，實現分頁功能
4、掌握elementUI的form相關組件的使用，實現條件查詢功能
5、掌握elementUI的dialog組件和$message的使用，實現彈出窗口和消息提示功能
6、掌握elementUI的select組件的使用，實現下拉列表功能實現新增數據和修改數據的功能
7、掌握confirm的使用，實現詢問框，實現刪除功能
1、什么是ElementUI？
Element 餓了么前端出品的一套 基於 Vue 2.0 的桌面端組件庫
官網: http://element.eleme.io/#/zh-CN
1.1、搭建elementUI腳手架(vue-admin-template)
# Clone project
git clone https://github.com/PanJiaChen/vue-admin-template.git
# Install dependencies
npm install
# Serve with hot reload at localhost:9528
npm run dev
# Build for production with minification
npm run build
# Build for production and view the bundle analyzer report
npm run build --report
在執行完npm run dev后發現瀏覽器自動打開了vue-admin-template登錄頁面，點擊登錄，此時模板頁面就搭建好了。
打開文件夾vue-admin-template，主要的目錄結構如下圖所示：
1.2 項目初始化調整
1.2.1 關閉語法規范性檢查
修改config/index.js ，將useEslint的值改為false。
此配置作用: 是否開啟語法檢查，語法檢查是通過ESLint 來實現的。
我們現在科普一下,什么是ESLint : ESLint 是一個語法規則和代碼風格的檢查工具，可以用來保證寫出語法正確、風格統一的代碼。如果我們開啟了Eslint , 也就意味着要接受它非常苛刻的語法檢查，包括空格不能少些或多些，必須單引不能雙引，語句后不可以寫 分號等等，這些規則其實是可以設置的。作為初學者，最好先關閉這種校驗，否則會浪費很多精力在語法的規范性上。如果以后做真正的企業級開發，建議開啟。
1.2.2 國際化設置
打開main.js 找到這句代碼
import locale from 'element‐ui/lib/locale/lang/en'
我們將en修改為zn-CN
import locale from 'element‐ui/lib/locale/lang/zh‐CN'
修改后組件都是按照中文的習慣展示
1.2.3 與easy-mock對接
(1)修改config下的dev.env.js中的BASE_API為easy-mock的Base URL
....
BASE_API: '"http://10.211.5.3:7300/mock/5af314a4c612420d0d7650c7"',
....
修改后發現無法登錄上vue-admin-templates，原因是修改了BASE_API，需要在自己的Easy-mock中修改驗證
(2)easy-mock添加登陸認證模擬數據 地址: /user/login
提交方式:post
內容:
{
"code": 20000,
"data": {
"roles": ["admin"],
"role": ["admin"],
"name": "admin",
"avatar": "https://wpimg.wallstcn.com/f778738c‐e4f8‐4870‐b634‐56703b4acafe.gif"
}
}
(3)添加返回用戶信息url模擬數據 地址:/user/info
提交方式:get
內容:
{
"code": 20000,
"data": {
"roles": ["admin"],
"role": ["admin"],
"name": "admin",
"avatar": "https://wpimg.wallstcn.com/f778738c‐e4f8‐4870‐b634‐56703b4acafe.gif"
}
}
此時又可以登錄上vue-admin-template，且成功與自己的easy-mock對接上了。
2.elementUI的table組件,實現列表展示
(1)在src/api/下創建gathering.js，書寫代碼：
import request from '@/utils/request'
export default{
getList(){
return request(
{
url:'/gathering/gathering',
method:'get'
}
);
}
}
導入request模塊實際上是對ajax的封裝(在utils/request.js中)，上述的url和method即為請求的url和method
(2)在views/table中創建 gathering.vue
vue主要分為視圖區<template>、邏輯區/代碼區<script>(用於控制視圖區的顯示)
<template>
<el-table :data="list" border style="width: 100%">
<el-table-column prop="id" label="活動ID" width="180">
</el-table-column>
<el-table-column prop="name" label="活動名稱" width="180">
</el-table-column>
<el-table-column prop="sponsor" label="主辦方" width="180">
</el-table-column>
<el-table-column prop="address" label="活動地址" width="180">
</el-table-column>
<el-table-column prop="starttime" label="開始日期" width="180">
</el-table-column>
<el-table-column prop="endtime" label="結束日期" width="180">
</el-table-column>
</el-table>
</template>
<script>
//將我們剛才書寫的gathering.js導入到該vue中,並聲明其作為變量gatheringApi
import gatheringApi from '@/api/gathering'
export default {
data() {
return {
list: []
}
},
created() {
this.fetchData()
},
methods: {
fetchData() {
gatheringApi.getList().then(response => {
this.list = response.data
})
}
}
}
</script>
(3)修改router/index.js中的path和import('@/views/table/gathering') 其中path為訪問路徑，import為views文件夾中的table文件夾中的gathering.vue文件
{
path: '/gathering',
component: Layout,
children: [
{
path: 'index',
name: 'Form',
component: () => import('@/views/table/gathering'),
meta: { title: '活動管理', icon: 'form' }
}
]
}
(4)reload工程 ： npm run dev
(5)plus：如果此時你在開發者工具中能正常接收數據，但是無法顯示，考慮easy-mock中的接口設置，返回值是否為20000等。
{
"code": 20000,
"flag": true,
"message": "@string",
"data|10": [{
"id": "@string",
"name": "@cword(8,12)",
"summary": "@cword(20,40)",
"detail": "@cword(20,40)",
"sponsor": "@string",
"image": "@image",
"starttime": "@date",
"endtime": "@date",
"address": "@county(true)",
"enrolltime": "@date",
"state": "@string",
"city": "@string"
}]
}
3.使用pagination實現分頁
我們已經通過表格組件完成了列表的展示，接下來需要使用分頁組件完成分頁功能
一般對於分頁，都需要前端傳遞給后端兩個參數：①當前頁碼 ②每頁顯示條數
由於筆者項目中用到了Easy Mock，所以我們第一步應該修改Easy Mock中的接口，產生更真實的模擬數據
(1)修改接口/gathering/gathering/search/{page}/{size} method:POST
(2)在gathering.js中添加新方法search，page當前頁碼，size每頁顯示條數，searchMap查詢條件
參考返回數據結構：
<script>
import gatheringApi from '@/api/gathering'
export default {
data() {
return {
total: 0 , //總記錄數
list: [],
currentPage: 1, //初始值為1
pageSize: 10, //每頁顯示條數
searchMap: {} //查詢條件
}
},
created() {
this.fetchData()
},
methods: {
fetchData() {
gatheringApi.search(this.currentPage,this.pageSize,this.searchMap).then(response => {
this.list = response.data.rows
this.total = response.data.total
})
}
}
}
</script>
此時js部分(邏輯處理層)我們已經完成，參考官方文檔完成分頁組件UI層：
http://element-cn.eleme.io/#/zh-CN/component/pagination
plus：@代表調用的方法，當每頁顯示個數和當前頁碼改變時會調用方法fetchData，:name代表屬性
<el-pagination
@size-change="fetchData"
@current-change="fetchData"
:current-page="currentPage"
:page-sizes="[5, 10, 20]"
:page-size="10"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
plus：如果加入該<el-pagination>到<template>中報錯，考慮在<template>下添加一個<div>標簽，因為<template>下只能有一個標簽加入后即只有一個<div>標簽，否則將存在<el-table>標簽和<el-pagination>標簽，故報錯。
4. 使用分頁+條件查詢
需求:在分頁列表的基礎上實現條件查詢功能【使用到了表單控件、文本輸入控件、日期輸入控件、行內表單等】
總體template代碼:
<template>
<div>
<br/>
<el-form :inline="true">
<el-form-item label="活動名稱">
<el-input v-model="searchMap.name"></el-input>
</el-form-item>
<el-form-item label="活動日期">
<el-date-picker v-model="searchMap.starttime_1" type="date" placeholder="選擇開始日期">
</el-date-picker>
<el-date-picker v-model="searchMap.starttime_2" type="date" placeholder="選擇結束日期">
</el-date-picker>
</el-form-item>
<el-button @click="fetchData()" type="primary">查詢</el-button>
</el-form>
......
</div>
</template>
5-6. 彈出窗口、消息提示、select下拉框
需求：界面中加入"新增"按鈕，點擊彈出編輯窗口，點擊“修改”按鈕，關閉窗口並刷新表格，彈出提示(成功或失敗)
涉及知識點：dialog組件、$message、switch開關、textarea文本域、form表單、select下拉框等
參考官方文檔：http://element-cn.eleme.io/#/zh-CN/component/dialog (如何調出窗口並關閉窗口)
plus：注意！需要在return內部聲明一個實體對象，用於存儲表單數據 ，如：renturn{ pojo:{} }
(省略了一部分代碼)新增city.js，並導出(參考gathering.js)。在gathering.vue中導入city，並在打開視圖時就加載城市：
created() {
this.fetchData()
cityApi.getList().then(response => {
this.cityList = response.data
})
}
不要忘記在return中加入city這個實體對象，否則為空報錯。如return{ cityList:[] }
<template>視圖層代碼：
<el-dialog title="編輯" :visible.sync="dialogFormVisible">
<el-form :model="form" label-width="100px">
<el-form-item label="活動名稱" :label-width="formLabelWidth">
<el-input v-model="pojo.name" placeholder="活動名稱"></el-input>
</el-form-item>
<el-form-item label="基本地址" :label-width="formLabelWidth">
<el-input v-model="pojo.address" placeholder="基本地址"></el-input>
</el-form-item>
<el-form-item label="開始日期" :label-width="formLabelWidth">
<el-date-picker v-model="pojo.starttime" type="date" placeholder="選擇開始日期">
</el-date-picker>
</el-form-item>
<el-form-item label="截至日期" :label-width="formLabelWidth">
<el-date-picker v-model="pojo.endtime" type="date" placeholder="選擇截至日期">
</el-date-picker>
</el-form-item>
<el-form-item label="報名截止" :label-width="formLabelWidth">
<el-date-picker v-model="pojo.enrolltime" type="date" placeholder="選擇截至日期">
</el-date-picker>
</el-form-item>
<el-form-item label="活動詳情" :label-width="formLabelWidth">
<el-input v-model="pojo.detail" type="textarea" :rows="3" placeholder="請輸入內容"></el-input>
</el-form-item>
<el-form-item label="選擇城市">
<el-select v-model="pojo.city" placeholder="請選擇城市">
<el-option v-for="item in cityList" :key="item.value" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="是否可見">
<el-switch v-model="pojo.status" active-value="1" inactive-value="0" ></el-switch>
</el-form-item>
<el-form-item>
<el-button type="primary">保存</el-button>
<el-button type="primary" @click="dialogFormVisible = false">關閉</el-button>
</el-form-item>
</el-form>
</el-dialog>
當我們點擊保存按鈕的時候，則觸發幾個動作：①彈出消息提示框(消息內容來自於響應體中的message) ②判斷消息狀態是否為true，為true則刷新列表(調用之前的刷新列表方法) ③關閉窗口(設置dialogVisible = false)，主要代碼如下：
<template>
...
<el-form-item>
<el-button type="primary" @click="handlerSave()">保存</el-button>
<el-button type="primary" @click="dialogFormVisible = false">關閉</el-button>
</el-form-item>
...
</template>
<script>
...
methods:{
handlerSave(){
gatheringApi.save(this.pojo).then(response => {
alert(response.message)
if(response.flag){ //如果成功
this.fetchData(); //刷新列表
}
})
this.dialogFormVisible=false //關閉窗口
}
}
...
</script>
7、在列表顯示頁面右側執行修改操作
需求：在表格的操作列增加"修改"按鈕，點擊修改按鈕彈出窗口並顯示數據，點擊保存按鈕保存 修改並刷新表格。
需求分析：在點擊修改按鈕時候，首先需要打開窗口(修改dialogVisible = true)，其次獲取點擊的數據行id，根據該id查詢數據並回顯，在點擊保存按鈕時候，執行上面所講的保存操作。
由於我們使用Easy-Mock模擬數據，我們首先需要修改根據id查詢數據的接口
(1)修改easymock接口/gathering/gathering/{id} (GET)
(2)修改src/api/gathering.js，增加方法定義
findById(id) {
return request({
url: `/gathering/gathering/${id}`,
method: 'get'
})
}
(3)修改src/views/table/gathering.vue的js腳本部分,新增handleEdit()方法
handleEdit(id){
this.dialogFormVisible=true //打開窗口
gatheringApi.findById(id).then(response=>{
if(response.flag){
this.pojo=response.data
}
})
}
(4)在表格table中增加模板列 ,模板列中防止修改按鈕，調用handleEdit方法
<el-table-column
label="操作"
width="100">
<template slot-scope="scope">
<el-button @click="handleEdit(scope.row.id)" type="text" size="small">修改</el-button>
</template>
</el-table-column>
fixed="right"的作用是定義此列為右固定列slot-scope用於指定當前行的上下文。
使用scope.row可以獲取行對象，此處我們需要獲得當前行的id，故使用scope.row.id
————————————————
版權聲明：本文為CSDN博主「itcats_cn」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/itcats_cn/java/article/details/85644226