免费视频淫片aa毛片_日韩高清在线亚洲专区vr_日韩大片免费观看视频播放_亚洲欧美国产精品完整版

本文主要從幾個方面快速入門ElementUI

1、什么是ElementUI ？ 掌握elementUI腳手架搭建

2、掌握elementUI的table組件的使用，實(shí)現(xiàn)列表功能

3、掌握elementUI的pagination組件的使用，實(shí)現(xiàn)分頁功能

4、掌握elementUI的form相關(guān)組件的使用，實(shí)現(xiàn)條件查詢功能

5、掌握elementUI的dialog組件和$message的使用，實(shí)現(xiàn)彈出窗口和消息提示功能

6、掌握elementUI的select組件的使用，實(shí)現(xiàn)下拉列表功能實(shí)現(xiàn)新增數(shù)據(jù)和修改數(shù)據(jù)的功能

7、掌握confirm的使用，實(shí)現(xiàn)詢問框，實(shí)現(xiàn)刪除功能

1、什么是ElementUI？

Element 餓了么前端出品的一套 基于 Vue 2.0 的桌面端組件庫

官網(wǎng): http://element.eleme.io/#/zh-CN

1.1、搭建elementUI腳手架(vue-admin-template)

在執(zhí)行完npm run dev后發(fā)現(xiàn)瀏覽器自動打開了vue-admin-template登錄頁面，點(diǎn)擊登錄，此時模板頁面就搭建好了。

打開文件夾vue-admin-template，主要的目錄結(jié)構(gòu)如下圖所示：

1.2 項(xiàng)目初始化調(diào)整

1.2.1  關(guān)閉語法規(guī)范性檢查

修改config/index.js ，將useEslint的值改為false。

此配置作用: 是否開啟語法檢查，語法檢查是通過ESLint 來實(shí)現(xiàn)的。

我們現(xiàn)在科普一下,什么是ESLint : ESLint 是一個語法規(guī)則和代碼風(fēng)格的檢查工具，可以用來保證寫出語法正確、風(fēng)格統(tǒng)一的代碼。如果我們開啟了Eslint , 也就意味著要接受它非?？量痰恼Z法檢查，包括空格不能少些或多些，必須單引不能雙引，語句后不可以寫 分號等等，這些規(guī)則其實(shí)是可以設(shè)置的。作為初學(xué)者，最好先關(guān)閉這種校驗(yàn)，否則會浪費(fèi)很多精力在語法的規(guī)范性上。如果以后做真正的企業(yè)級開發(fā)，建議開啟。

1.2.2  國際化設(shè)置

打開main.js 找到這句代碼

import locale from 'element‐ui/lib/locale/lang/en'

我們將en修改為zn-CN
import locale from 'element‐ui/lib/locale/lang/zh‐CN'

修改后組件都是按照中文的習(xí)慣展示

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'',
....

修改后發(fā)現(xiàn)無法登錄上vue-admin-templates，原因是修改了BASE_API，需要在自己的Easy-mock中修改驗(yàn)證

(2)easy-mock添加登陸認(rèn)證模擬數(shù)據(jù) 地址: /user/login
提交方式:post
內(nèi)容:

(3)添加返回用戶信息url模擬數(shù)據(jù) 地址:/user/info
提交方式:get
內(nèi)容:

{
'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組件,實(shí)現(xiàn)列表展示

(1)在src/api/下創(chuàng)建gathering.js，書寫代碼：

導(dǎo)入request模塊實(shí)際上是對ajax的封裝(在utils/request.js中)，上述的url和method即為請求的url和method

(2)在views/table中創(chuàng)建 gathering.vue

vue主要分為視圖區(qū)<template>、邏輯區(qū)/代碼區(qū)<script>(用于控制視圖區(qū)的顯示)

<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='結(jié)束日期' width='180'>
</el-table-column>
</el-table>
</template>
<script>
//將我們剛才書寫的gathering.js導(dǎo)入到該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文件

(4)reload工程 ：   npm run dev

(5)plus：如果此時你在開發(fā)者工具中能正常接收數(shù)據(jù)，但是無法顯示，考慮easy-mock中的接口設(shè)置，返回值是否為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實(shí)現(xiàn)分頁

我們已經(jīng)通過表格組件完成了列表的展示，接下來需要使用分頁組件完成分頁功能

一般對于分頁，都需要前端傳遞給后端兩個參數(shù)：①當(dāng)前頁碼   ②每頁顯示條數(shù)

由于筆者項(xiàng)目中用到了Easy Mock，所以我們第一步應(yīng)該修改Easy Mock中的接口，產(chǎn)生更真實(shí)的模擬數(shù)據(jù)

(1)修改接口/gathering/gathering/search/{page}/{size} method:POST

(2)在gathering.js中添加新方法search，page當(dāng)前頁碼，size每頁顯示條數(shù)，searchMap查詢條件

參考返回數(shù)據(jù)結(jié)構(gòu)：

此時js部分(邏輯處理層)我們已經(jīng)完成，參考官方文檔完成分頁組件UI層：

http://element-cn.eleme.io/#/zh-CN/component/pagination

plus：@代表調(diào)用的方法，當(dāng)每頁顯示個數(shù)和當(dāng)前頁碼改變時會調(diào)用方法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>標(biāo)簽，因?yàn)?lt;template>下只能有一個標(biāo)簽加入后即只有一個<div>標(biāo)簽，否則將存在<el-table>標(biāo)簽和<el-pagination>標(biāo)簽，故報錯。

4. 使用分頁+條件查詢

需求:在分頁列表的基礎(chǔ)上實(shí)現(xiàn)條件查詢功能【使用到了表單控件、文本輸入控件、日期輸入控件、行內(nèi)表單等】

總體template代碼:

5-6. 彈出窗口、消息提示、select下拉框

需求：界面中加入'新增'按鈕，點(diǎn)擊彈出編輯窗口，點(diǎn)擊“修改”按鈕，關(guān)閉窗口并刷新表格，彈出提示(成功或失敗)

涉及知識點(diǎn)：dialog組件、$message、switch開關(guān)、textarea文本域、form表單、select下拉框等

參考官方文檔：http://element-cn.eleme.io/#/zh-CN/component/dialog      (如何調(diào)出窗口并關(guān)閉窗口)

plus：注意！需要在return內(nèi)部聲明一個實(shí)體對象，用于存儲表單數(shù)據(jù) ，如：renturn{ pojo:{} }

(省略了一部分代碼)新增city.js，并導(dǎo)出(參考gathering.js)。在gathering.vue中導(dǎo)入city，并在打開視圖時就加載城市：

created() {
this.fetchData()
cityApi.getList().then(response => {
this.cityList = response.data
})
}

不要忘記在return中加入city這個實(shí)體對象，否則為空報錯。如return{ cityList:[] }

<template>視圖層代碼：

當(dāng)我們點(diǎn)擊保存按鈕的時候，則觸發(fā)幾個動作：①彈出消息提示框(消息內(nèi)容來自于響應(yīng)體中的message)  ②判斷消息狀態(tài)是否為true，為true則刷新列表(調(diào)用之前的刷新列表方法)  ③關(guān)閉窗口(設(shè)置dialogVisible = false)，主要代碼如下：

<template>
...
<el-form-item>
<el-button type='primary' @click='handlerSave()'>保存</el-button>
<el-button type='primary' @click='dialogFormVisible = false'>關(guān)閉</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 //關(guān)閉窗口
}
}
...
</script>

7、在列表顯示頁面右側(cè)執(zhí)行修改操作

需求：在表格的操作列增加'修改'按鈕，點(diǎn)擊修改按鈕彈出窗口并顯示數(shù)據(jù)，點(diǎn)擊保存按鈕保存 修改并刷新表格。

需求分析：在點(diǎn)擊修改按鈕時候，首先需要打開窗口(修改dialogVisible = true)，其次獲取點(diǎn)擊的數(shù)據(jù)行id，根據(jù)該id查詢數(shù)據(jù)并回顯，在點(diǎn)擊保存按鈕時候，執(zhí)行上面所講的保存操作。

由于我們使用Easy-Mock模擬數(shù)據(jù)，我們首先需要修改根據(jù)id查詢數(shù)據(jù)的接口

(1)修改easymock接口/gathering/gathering/{id} (GET)

(2)修改src/api/gathering.js，增加方法定義

(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中增加模板列 ,模板列中防止修改按鈕，調(diào)用handleEdit方法

fixed='right'的作用是定義此列為右固定列slot-scope用于指定當(dāng)前行的上下文。 

使用scope.row可以獲取行對象，此處我們需要獲得當(dāng)前行的id，故使用scope.row.id