ElementUI在實際專案使用步驟詳解
目錄
- 1.表格自排序
- 2.分頁功能
- 3.el-checkbox-group多選框
- 4.封裝日曆元件
- 5.用antv-G2實現雷達圖
- 6.多語言支援
1.表格自排序
目標：點選入職時間後面的上下箭頭可以實現當前頁資料按照入職時間升序或者降序排列
思路：給el-table-column新增sortable
排序是對取回來的資料做排序，只在前端。
參考：https://element.eleme.io/#/zh-CN/component/table#pai-xu
程式碼實現(參考)：
<!-- 1.定義需要根據欄位排序的欄位名稱 -->
<el-table :data="list" border :default-sort="{prop: 'workNumber'}">
</el-table>
<!-- 2.保證欄位列上聲明瞭prop屬性 和 sortable屬性 -->
<el-table-column label="入職時間" sortable prop="timeOfEntry">
</el-table-column>2.分頁功能
目標（效果）：實現分頁獲取資料邏輯
思路：按分頁元件的屬性要求進行配置即可。
步驟：
步驟1：補充資料項
按el-pagination元件的要求，在頁面中新增與分頁相關的資料項
data() {
return {
// 省略其他
total: 0,page: 1,// 當前頁碼
size: 5,// 每頁幾條
total: 0 // 總共資料條數
}
}
步驟2：分頁結構
<div style="height: 60px; margin-top: 10px">
<!-- 分頁 -->
<el-pagination
layout="total,sizes,prev,pager,next,jumper"
:total="total"
:page-size="size"
:page-sizes="[2,5,10]"
@current-change="hCurrentChange"
@size-change="hSizeChange"
/>
</div>步驟3：分頁邏輯實現
// 會自動接收當前點選的頁碼
hCurrentChange(curPage) {
// alert(curPage)
// 1. 更新頁碼
this.page = curPage
// 2. 重發請求
this.loadEmployee()
},// 每頁幾條
hSizeChange(curSize) {
// alert(size)
// 1. 更新每頁的條數
this.size = curSize
// 2. 重發請求
this.loadEmployee()
},3.el-checkbox-group多選框
作用（效果）
使用注意事項：
對於用來表示多選的el-checkbox-group來說：
v-model的值是陣列（表示多選）
它的子元素el-checkbox的label屬性決定了選中這一項之後值
模板
<el-checkbox-group v-model="roleIds"> <el-checkbox label="110">管理員</el-checkbox> <el-checkbox label="113">開發者</el-checkbox> <el-checkbox label="115">人事</el-checkbox> </el-checkbox-group>
資料
data () {
return {
roleIds: [] // 儲存當前選中的許可權列表
}
}
4.封裝日曆元件
效果：
思路：這個元件比較大(主頁中的程式碼也比較多了)，所以我們會單獨提出來成一個元件
步驟1：封裝一個元件 （註冊引入使用三部曲）
步驟2：在主頁中使用日曆元件
<el-card class="box-card"> <div slot="OLdJnxheader" class="header"> <span&gwww.cppcns.comt;工作日曆</span> </div> <!-- 放置日曆元件 --> <calender /> </el-card>
步驟3：用插槽自定義日曆內容顯示
<template>
<el-calendar v-model="currentDate">
<template slot="dateCell">
<div class="date-content">
<span class="text">01</span>
<span class="rest">休</span>
</div>
</template>
</el-calendar>
</template>
<script>
export default {
data() {
return {
curDate: new Date()
}
}
}
</script>
5.用antv-G2實現雷達圖
效果：
這種圖在echarts中也有，這裡我們用螞蟻資料視覺化部門的產品antv-G2
https://antv.vision/zh
https://g2.antv.vision/zh/examples/radar/radar#basic
步驟1：安裝必要依賴
npm install @antv/data-set @antv/g2
步驟2：建立一個元件來實現雷達圖
下面的程式碼在官網中參考過來的：https://g2.antv.vision/zh/examples/radar/radar#basic
<template>
<div id="container" />
</template>
<script>
import DataSet from '@antv/data-set'
import { Chart } from '@antv/g2'
export default {
mounted() {
const data = [
{ item: '工作效率',a: 70,b: 30 },{ item: '考勤',a: 60,b: 70 },{ item: '積極性',a: 50,b: 60 },{ item: '幫助同事',a: 40,b: 50 },{ item: '自主學習',{ item: '正確率',b: 50 }
]
const { DataView } = DataSet
const dv = new DataView().source(data)
dv.transform({
type: 'fold',fields: ['a','b'],// 展開欄位集
key: 'user',// key欄位
value: 'score' // value欄位
})
const chart = new Chart({
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
}
}
}
})www.cppcns.com
chart.axis('score',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,fiwww.cppcns.comllOpacity: 1
})
chart
.area()
.position('item*score')
.color('user')
chart.render()
}
}
</script>
6.多語言支援
效果：專案中的多語言支援使用的是vue-i18n
參考： https://kazupon..io/vue-i18n/zh/started.html
目標：實現elementUI中英文切換功能，感受中文切換的效果
步驟1：安裝國際化的包
npm i [email protected]
步驟2：ElementUI多語言配置
引入element語言包檔案src/lang/index.
// 進行多語言支援配置
import Vue from 'vue' // 引入Vue
import VueI18n from 'vue-i18n' // 引入國際化的外掛包
import locale from 'element-ui/lib/locale'
import elementEN from 'element-ui/lib/locale/lang/en' // 引入餓了麼的英文包
import elementZH from 'element-ui/lib/locale/lang/zh-CN' // 引入餓了麼的中文包
Vue.use(VueI18n) // 全域性註冊國際化包
// 建立國際化外掛的例項
const i18n = new VueI18n({
// 指定語言型別 zh表示中文 en表示英文
locale: 'zh',// 將elementUI語言包加入到外掛語言資料裡
messages: {
// 英文環境下的語言資料
en: {
...elementEN
},// 中文環境下的語言資料
zh: {
...elementZH
}
}
})
// 配置elementUI 語言轉換關係
locale.i18n((key,value) => i18n.t(key,value))
export default i18n
到此這篇關於ElementUI在實際專案使用的功能總結的文章就介紹到這了,更多相關ElementUI專案使用總結內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！