ElementUI在實際項目使用步驟詳解

第ElementUI在實際項目使用步驟詳解目錄1.表格自排序2.分頁功能3.el-checkbox-group多選框4.封裝日歷組件5.用antv-G2實現(xiàn)雷達(dá)圖6.多語言支持

1.表格自排序

目標(biāo)：點(diǎn)擊入職時間后面的上下箭頭可以實現(xiàn)當(dāng)前頁數(shù)據(jù)按照入職時間升序或者降序排列

思路：給el-table-column添加sortable

排序是對取回來的數(shù)據(jù)做排序，只在前端。

參考：https://element.eleme.io/#/zh-CN/component/table#pai-xu

代碼實現(xiàn)(參考)：

!--1.定義需要根據(jù)字段排序的字段名稱--

el-table:data="list"border:default-sort="{prop:'workNumber'}"

/el-table

!--2.保證字段列上聲明了prop屬性和sortable屬性--

el-table-columnlabel="入職時間"sortableprop="timeOfEntry"

/el-table-column

2.分頁功能

目標(biāo)（效果）：實現(xiàn)分頁獲取數(shù)據(jù)邏輯

思路：按分頁組件的屬性要求進(jìn)行配置即可。

步驟：

步驟1：補(bǔ)充數(shù)據(jù)項

按el-pagination組件的要求，在頁面中添加與分頁相關(guān)的數(shù)據(jù)項

data(){

return{

//省略其他

total:0,

page:1,//當(dāng)前頁碼

size:5,//每頁幾條

total:0//總共數(shù)據(jù)條數(shù)

}

步驟2：分頁結(jié)構(gòu)

div

!--分頁--

el-pagination

layout="total,sizes,prev,pager,next,jumper"

:total="total"

:size="size"

:sizes="[2,5,10]"

@current-change="hCurrentChange"

@size-change="hSizeChange"

/div

步驟3：分頁邏輯實現(xiàn)

//會自動接收當(dāng)前點(diǎn)擊的頁碼

hCurrentChange(curPage){

//alert(curPage)

//1.更新頁碼

this.page=curPage

//2.重發(fā)請求

this.loadEmployee()

//每頁幾條

hSizeChange(curSize){

//alert(size)

//1.更新每頁的條數(shù)

this.size=curSize

//2.重發(fā)請求

this.loadEmployee()

},

3.el-checkbox-group多選框

作用（效果）

使用注意事項：

對于用來表示多選的el-checkbox-group來說：

v-model的值是數(shù)組（表示多選）

它的子元素el-checkbox的label屬性決定了選中這一項之后值

模板

el-checkbox-groupv-model="roleIds"

el-checkboxlabel="110"管理員/el-checkbox

el-checkboxlabel="113"開發(fā)者/el-checkbox

el-checkboxlabel="115"人事/el-checkbox

/el-checkbox-group

數(shù)據(jù)

data(){

return{

roleIds:[]//保存當(dāng)前選中的權(quán)限列表

}

4.封裝日歷組件

效果：

思路：這個組件比較大(主頁中的代碼也比較多了)，所以我們會單獨(dú)提出來成一個組件

步驟1：封裝一個組件（注冊引入使用三部曲）

步驟2：在主頁中使用日歷組件

el-card

divslot="header"

span工作日歷/span

/div

!--放置日歷組件--

calender/

/el-card

步驟3：用插槽自定義日歷內(nèi)容顯示

template

el-calendarv-model="currentDate"

templateslot="dateCell"

div

span01/span

span休/span

/div

/template

/el-calendar

/template

script

exportdefault{

data(){

return{

curDate:newDate()

/script

5.用antv-G2實現(xiàn)雷達(dá)圖

效果：

這種圖在echarts中也有，這里我們用螞蟻數(shù)據(jù)可視化部門的產(chǎn)品antv-G2

https://antv.vision/zh

https://g2.antv.vision/zh/examples/radar/radar#basic

步驟1：安裝必要依賴

npminstall@antv/data-set@antv/g2

步驟2：創(chuàng)建一個組件來實現(xiàn)雷達(dá)圖

下面的代碼在官網(wǎng)中參考過來的：https://g2.antv.vision/zh/examples/radar/radar#basic

template

divid="container"/

/template

script

importDataSetfrom'@antv/data-set'

import{Chart}from'@antv/g2'

exportdefault{

mounted(){

constdata=[

{item:'工作效率',a:70,b:30},

{item:'考勤',a:60,b:70},

{item:'積極性',a:50,b:60},

{item:'幫助同事',a:40,b:50},

{item:'自主學(xué)習(xí)',a:60,b:70},

{item:'正確率',a:70,b:50}

const{DataView}=DataSet

constdv=newDataView().source(data)

dv.transform({

type:'fold',

fields:['a','b'],//展開字段集

key:'user',//key字段

value:'score'//value字段

constchart=newChart({

container:'container',

autoFit:true,

height:500

chart.data(dv.rows)

chart.scale('score',{

min:0,

max:80

chart.coordinate('polar',{

radius:0.8

chart.tooltip({

shared:true,

showCrosshairs:true,

crosshairs:{

line:{

style:{

lineDash:[4,4],

stroke:'#333'

chart.axis('item',{

line:null,

tickLine:null,

grid:{

line:{

style:{

lineDash:null

chart.axis('score',{

line:null,

tickLine:null,

grid:{

line:{

type:'line',

style:{

lineDash:null

chart

.line()

.position('item*score')

.color('user')

.size(2)

chart

.point()

.position('item*score')

.color('user')

.shape('circle')

.size(4)

.style({

stroke:'#fff',

lineWidth:1,

fillOpacity:1

chart

.area()

.position('item*score')

.color('user')

chart.render()

/script

6.多語言支持

效果：vue項目中的多語言支持使用的是vue-i18n

參考：https://kazupon.github.io/vue-i18n/zh/started.html

目標(biāo)：實現(xiàn)elementUI中英文切換功能，感受中文切換的效果

步驟1：安裝國際化的包

npmivue-i18n@8.22.2

步驟2：ElementUI多語言配置

引入element語言包文件src/lang/index.js

//進(jìn)行多語言支持配置

importVuefrom'vue'//引入Vue

importVueI18nfrom'vue-i18n'//引入國際化的插件包

importlocalefrom'element-ui/lib/locale'

importelementENfrom'element-ui/lib/locale/lang/en'//引入餓了么的英文包

importelementZHfrom'element-ui/lib/locale/lang/zh-CN'//引入餓了么的中文包

Vue.use(VueI18n)//全局注冊國際化包

//創(chuàng)建國際化插件的實例

consti18n=newVueI18n({

//指定語言類型zh表示中文e