vue3+el-table實現(xiàn)行列轉(zhuǎn)換
行列轉(zhuǎn)換
為啥會出現(xiàn)行列轉(zhuǎn)換的問題呢？因為用戶想看的是一張多列的大表單，但是數(shù)據(jù)庫里面保存的是“單列”的數(shù)據(jù)。于是就需要做一個轉(zhuǎn)換，這樣客戶看得更方便清晰。
SQL有一種寫法可以支持這種行列轉(zhuǎn)換，但是寫起來比如繞，不便于理解。
所以我個人還是傾向于在前端實現(xiàn)轉(zhuǎn)換的操作，因為可以節(jié)省后端的性能資源。
這里以成績單為例演示一下具體的實現(xiàn)方式。
分析成績單的組成
這個又愛又恨的東東想必大家都不會陌生，這是一個比較典型的需要行列轉(zhuǎn)換的情景。
先回顧一下成績單的樣子：（圖片來自于網(wǎng)絡(luò)，侵刪）
成績單
分析一下，可以得到如下幾個基本元素：
- 學(xué)科：語文、數(shù)學(xué)、物理、化學(xué)等。確定列數(shù)
- 學(xué)生：確定行數(shù)
- 年級班級：一年一班、一年二班等。分類依據(jù)
- 考試：期中考試、期末考試等。分類依據(jù)
- 成績：確定數(shù)據(jù)內(nèi)容。
元素的分類：
- 分類依據(jù)：指的是生成一個大表單的查詢條件，同類別的數(shù)據(jù)匯總成一個大表單。
- 學(xué)科：確定列數(shù)，科目越多列數(shù)也就越多。
- 學(xué)生：確定行數(shù)，學(xué)生越多行數(shù)也就越多。
我們再看看數(shù)據(jù)庫里的設(shè)計，一般會設(shè)計幾個基礎(chǔ)表和一個成績表。
- 學(xué)科表
- 學(xué)生表
- 班級表
- 考試表
- 成績表
篇幅有限，具體字段就不介紹了，說全的話也是挺復(fù)雜的。
用 vue3 + el-table 做的成績單
行列轉(zhuǎn)換后的成績單
學(xué)科、學(xué)生、總分、平均分、最高分、最低分、名次都有了。還可以各種排序。下面我們來看看是如何實現(xiàn)的。
前端模擬數(shù)據(jù)
我們在前端模擬一下數(shù)據(jù)。（簡化模式）
// 學(xué)科 —— 確定列
const subject = [
{ id: 1, name: '數(shù)學(xué)' },
{ id: 2, name: '語文' },
{ id: 3, name: '物理' },
{ id: 4, name: '化學(xué)' }
]
// 學(xué)生 —— 確定行
const student = [
{ id: 1, name: '張三' },
{ id: 2, name: '李四' },
{ id: 3, name: '王五' },
{ id: 4, name: '趙六' }
]
// 班級 —— 分類依據(jù)
const classes = [
{ id: 1, name: '一年一班' },
{ id: 2, name: '一年二班' }
]
// 考試 —— 分類依據(jù)
const exam = [
{ id: 1, name: '期中考試' },
{ id: 2, name: '期末考試' }
]
// 成績 —— 確定內(nèi)容
const reportCard = [
// 序號 考試ID 班級ID 學(xué)生ID 科目ID 成績
{ id: 1, examId: 1, classId: 1, studentId: 1, subjectId: 1, score: 100 },
{ id: 2, examId: 1, classId: 1, studentId: 1, subjectId: 2, score: 98 },
{ id: 3, examId: 1, classId: 1, studentId: 1, subjectId: 3, score: 90 },
{ id: 4, examId: 1, classId: 1, studentId: 2, subjectId: 1, score: 90 },
{ id: 5, examId: 1, classId: 1, studentId: 2, subjectId: 2, score: 90 },
{ id: 6, examId: 1, classId: 1, studentId: 2, subjectId: 3, score: 40 },
{ id: 7, examId: 1, classId: 1, studentId: 3, subjectId: 1, score: 30 },
{ id: 8, examId: 1, classId: 1, studentId: 3, subjectId: 2, score: 90 },
{ id: 8, examId: 1, classId: 1, studentId: 3, subjectId: 3, score: 40 },
{ id: 9, examId: 1, classId: 1, studentId: 4, subjectId: 1, score: 64 },
{ id: 8, examId: 1, classId: 1, studentId: 4, subjectId: 2, score: 90 },
{ id: 9, examId: 1, classId: 1, studentId: 4, subjectId: 3, score: 70 }
]
使用 el-table 生成成績單
element-plus 提供了一個很強大的 表格組件 —— el-table，可以實現(xiàn)很多基礎(chǔ)功能，比如排序、調(diào)整寬度、設(shè)置顏色、篩選等功能。那么我們可以使用這個組件來實現(xiàn)成績單。
確定表頭
行列轉(zhuǎn)換的一大特點是，表頭（有多少列）并不是固定的，而是需要動態(tài)生成的。
以成績單為例，表頭列數(shù)由學(xué)科決定，學(xué)科越多，表頭也就越多。
首先我們按照 el-table 的要求設(shè)置一下表頭：
/**
* 根據(jù)學(xué)科建立表頭
* * 學(xué)號、姓名、【各個學(xué)科】、總分、平均分、名次
*/
const createTableHead = () => {
// 添加學(xué)生
const head = [
{
prop: 'id',
label: '學(xué)號',
width: 120
},
{
prop: 'name',
label: '姓名',
width: 120
}]
// 添加科目
for (const key in subject) {
const sub = subject[key]
head.push({
prop: 'sub_' + sub.id,
label: sub.name,
width: 120
})
}
head.push({
prop: 'totalScore',
label: '總分',
width: 120
})
head.push({
prop: 'averageScore',
label: '平均分',
width: 120
})
head.push({
prop: 'ranking',
label: '名次',
width: 120
})
return head
}
這里表頭分為兩種，一個是固定的，一個是根據(jù)科目動態(tài)生成的。
我們采用簡單粗暴的方式，先直接添加固定列，然后遍歷學(xué)科添加動態(tài)列。
確定數(shù)據(jù)
表頭確定好了之后，我們需要確定一下 data 部分，正式開始行列轉(zhuǎn)換。
還是按照 el-table 的需要來定義一下數(shù)據(jù)格式：
{
id: 1,
name: '張三',
sub_1: 100,
sub_2: 100,
...
totalScore: 200,
averageScore: 100,
ranking: 1
}
中間可以有各個學(xué)科，屬性命名規(guī)則： 前綴 “sub_” + 學(xué)科ID 。
這樣便于后續(xù)添加數(shù)據(jù)。
遍歷成績表來填充數(shù)據(jù)。
/**
* 行列轉(zhuǎn)換
*/
const rowToCol = () => {
// 對象形式的成績列表
const _code = {}
// 數(shù)組形式的成績列表
const _arr = []
// 遍歷成績單
for (const key in reportCard) {
const rep = reportCard[key]
if(typeof _code[rep.studentId] === 'undefined') {
// 沒有記錄。創(chuàng)建一行學(xué)生成績，加入固定列的數(shù)據(jù)
_code[rep.studentId] = {
id: rep.studentId, // 學(xué)生ID
name: (student.filter((item)=>item.id === rep.studentId)[0] || {name:''}).name, // 根據(jù)id獲取學(xué)生姓名
totalScore: 0, // 學(xué)生的各科總分，后續(xù)修改
averageScore: 0, // 學(xué)生各科的平均分，后續(xù)修改
ranking: 1 // 名次，后續(xù)修改
}
}
// 記錄各科分?jǐn)?shù)
_code[rep.studentId]['sub_' + rep.subjectId] = rep.score
}
// 計算總分、平均分
下面介紹
// 計算名次
下面介紹
return _arr
}
遍歷成績單的數(shù)據(jù)，先依據(jù)學(xué)生ID建立一個對象，然后根據(jù)學(xué)科確定各科成績。
計算學(xué)生的總分和平均分
一般成績單還需要得到學(xué)生的總分和平均分，我們可以遍歷成績統(tǒng)計總分和平均分。
...
// 計算總分、平均分
for(const key in _code) {
const code = _code[key]
// 遍歷學(xué)科
let total = 0
let ave = 0
let count = 0
for (const key in subject) {
const fenshu = code['sub_' + subject[key].id]
if (typeof fenshu !== 'undefined') {
// 有成績，計算總分和平均分
count++
total += fenshu
ave = Math.floor(total / count * 10) / 10 // 保留一位小數(shù)。
// 如果保留兩位小數(shù)的話可以這樣 (total / count ).toFixed(2)
}
}
code.totalScore = total
code.averageScore = ave
// 對象的數(shù)據(jù)轉(zhuǎn)為數(shù)組的數(shù)據(jù)
_arr.push(code)
}
計算排名
成績單有了，我們還需要做一個排名。
如果不需要排名次的話，可以跳過此步驟。
let _ranking = 0
_arr.sort((a, b) => {
// 按照總分倒序
return b.totalScore - a.totalScore
}).forEach((item) => {
// 設(shè)置名次
_ranking++
_arr.find((a) => a.id === item.id).ranking = _ranking
})
計算各個學(xué)科的平均分。
這個也是比較常見的需求。
el-table 提供了自動求和的功能，同時也提供了自定義求和的方法，我們可以利用他來實現(xiàn)學(xué)科的平均分。
下面是官網(wǎng)給出的方法，本來是求和的，稍微修改一下就可以得到學(xué)科的平均分。
// 計算各學(xué)科的平均分
let i = 0
const getSummaries = (param) => {
i++
if (i < 7) return []
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '平均分'
return
}
const values = data.map(item => Number(item[column.property]));
if (!values.every(value => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr)
if (!isNaN(value)) {
return prev + curr
} else {
return prev
}
}, 0);
sums[index] = Math.floor(sums[index] / values.length * 10) / 10
} else {
sums[index] = 'N/A';
}
})
return sums
跟蹤了一下，發(fā)現(xiàn)這個函數(shù)會被調(diào)用七次，這個次數(shù)似乎和行數(shù)、列數(shù)沒有關(guān)系。
而且前幾次的 return 沒啥作用，最后一次才會有效，所以加了一個判斷。
記錄各個科目的最高分和最低分
一張成績單還可以計算各種數(shù)據(jù)，比如看看學(xué)科的最高分?jǐn)?shù)、最低分?jǐn)?shù)。
一般也可以關(guān)注一下這些統(tǒng)計數(shù)據(jù)，同樣我么可以用自定義求和的方法來實現(xiàn)需求，我么改進一下 getSummaries。
// 計算各科目的平均分、最高分和最低分
const getSummaries = ({ columns }) => {
i++
if (i < 7) return []
const sums = [];
columns.forEach((item, index) => {
if (item.property.indexOf('sub_') >= 0 ){
const subjectId = item.property.replace('sub_', '')*1
// 學(xué)科，計算平均值
let ave = 0
let sum = 0
let max = 0
let min = 99999
const _arr = reportCard.filter((r) => r.subjectId === subjectId)
_arr.forEach((item, index) => {
sum += item.score // 求和
if (max < item.score) max = item.score // 記錄最高分
if (min > item.score) min = item.score // 記錄最低分
})
if (_arr.length === 0) {
sums[index] = '-' // 沒有成績
} else {
// 計算平均分
ave = Math.floor(sum/_arr.length * 10) / 10
sums[index] = `${ave}(${max}-${min})`
}
} else {
// 不計算
sums[index] = ''
}
})
sums[0] = '統(tǒng)計'
return sums
}
這次我么直接同 reportCard 來統(tǒng)計平均分、最高分和最低分。
同理，我么還可以統(tǒng)計一下及格人數(shù)、各個分段的人數(shù)。
增加排序功能
這個是 el-table 自帶的功能，我們加上就好。
<el-table
:data="tableData"
style="width: 100%;height: 300px;"
:default-sort = "{prop: 'totalScore', order: 'descending'}"
:row-class-name="tableRowClassName"
border
show-summary
:summary-method="getSummaries"
>
<el-table-column
v-for="(item, index) in tableHead"
:key="'s'+ index"
fixed
sortable
:prop="item.prop"
:label="item.label"
:width="item.width">
</el-table-column>
</el-table>
el-table 的屬性設(shè)置。default-sort 默認(rèn)按照 總分倒序顯示。
增加色彩區(qū)分
如果想要把平均分低于60的著重表示出來怎么辦？el-table 也提供了功能，我們做一下判斷設(shè)置css即可。
// 顏色
const tableRowClassName = ({row, rowIndex}) => {
if (row.averageScore < 60) { // 平均分不及格的同學(xué)
return 'warning-row';
} else if (row.averageScore > 95) { // 平均分超過95的同學(xué)
return 'success-row';
}
return '';
}
源碼
https://gitee.com/naturefw/nf-vite2-element
小結(jié)
優(yōu)點：
- 不需要后端做行列轉(zhuǎn)換，只需要提供基礎(chǔ)數(shù)據(jù)即可，節(jié)省后端性能資源。
- 功能比較全面，我能想到的基本都加上了。
缺點：
- 沒能做成通用的形式，其他行列轉(zhuǎn)換的需求還需要編寫代碼。
到此這篇關(guān)于vue3+el-table實現(xiàn)行列轉(zhuǎn)換的文章就介紹到這了,更多相關(guān)vue3 行列轉(zhuǎn)換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue 圖片裁剪上傳組件的實現(xiàn)，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-11-11
這篇文章主要介紹了vue實現(xiàn)打包添加二級目錄方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
ElementPlus el-message-box樣式錯位問題及解決
這篇文章主要介紹了ElementPlus el-message-box樣式錯位問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
今天小編就為大家分享一篇vue修改對象的屬性值后頁面不重新渲染的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue中的slot-scope及scope.row用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
在Vue中,使用EventBus可以實現(xiàn)組件間的通信,如何使用EventBus？?都需要做哪些配置呢？他的注意事項是什么呢？下面就跟隨小編一起學(xué)習(xí)一下吧2024-02-02
這篇文章主要介紹了vue-cli4使用全局less文件中的變量配置操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
Vue.use()主要用于注冊全局插件,當(dāng)插件具有install方法時,調(diào)用Vue.use()可以全局使用該插件,Vue.prototype用于注冊全局變量,這些變量在項目任何位置都可以通過this.$變量名訪問,兩者的主要區(qū)別在于Vue.use()用于插件,Vue.prototype用于變量2024-10-10
localStorage 和 sessionStorage 屬性允許在瀏覽器中存儲 key/value 對的數(shù)據(jù),localStorage 用于長久保存整個網(wǎng)站的數(shù)據(jù),保存的數(shù)據(jù)沒有過期時間,直到手動去刪除,本文給大家介紹Vue3封裝localStorage-基本使用,感興趣的朋友一起看看吧2023-12-12
這篇文章主要介紹了vue父子組件的數(shù)據(jù)傳遞示例,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03