vue 3+el-table 행렬 전환 실현
왜 행렬 전환 의 문제 가 발생 합 니까?사용자 가 보고 싶 은 것 은 여러 열의 큰 폼 이지 만 데이터베이스 에 저 장 된 것 은'단일 열'의 데이터 이기 때문이다.그래서 고객 이 더욱 편리 하고 뚜렷하게 볼 수 있 도록 전환 을 해 야 한다.
SQL 은 이러한 행렬 전환 을 지원 할 수 있 는 쓰기 방법 이 있 지만,예 를 들 어 돌아 서 이해 하기 어렵다.
그래서 저 는 개인 적 으로 전단 에서 전환 하 는 작업 을 하 는 경향 이 있 습 니 다.백 엔 드 의 성능 자원 을 절약 할 수 있 기 때 문 입 니 다.
성적 표를 예 로 들 어 구체 적 인 실현 방식 을 보 여 준다.
성적표 구성 분석
사랑 하고 미워 하 는 이 동 동 은 모두 가 낯 설 지 않 을 것 이다.이것 은 비교적 전형 적 인 행렬 전환 이 필요 한 상황 이다.
성적표 의 모습 을 살 펴 보 자.
성적표
분석 해 보면 다음 과 같은 몇 가지 기본 요 소 를 얻 을 수 있다.
학과:국어,수학,물리,화학 등.열 수 를 확정 하 다.
학생:행 수 를 확정 하 다.
학년 반:1 년 1 반,1 년 2 반 등.분류 근거
4.567917.시험:중간고사,기말고사 등.분류 근거
성적:데이터 내용 을 확인한다원소 의 분류:
4.567917.분류 근거:큰 폼 을 만 드 는 조회 조건 을 말 하 는데 같은 유형의 데 이 터 를 하나의 큰 폼 으로 모 으 는 것 을 말한다학과:열 수 를 정 하고 과목 이 많 을 수록 열 수가 많아 집 니 다학생:행 수 를 정 하면 학생 이 많 을 수록 행 수가 많아 집 니 다우 리 는 데이터베이스 안의 디자인 을 다시 한 번 살 펴 보면 보통 몇 개의 기초 표 와 성적 표를 설계 할 것 이다.
학과 표
학생 표
학급 표
시험 표
성적표
편폭 이 제한 되 어 있어 구체 적 인 필드 는 소개 하지 않 고 모든 말 을 하 는 것 도 복잡 하 다.
vue 3+el-table 로 만 든 성적표
행렬 전환 후의 성적표
학과,학생,총 점,평균 점,최고 점,최저 점,순위 가 모두 있다.여러 가지 정렬 도 할 수 있다.어떻게 이 루어 졌 는 지 살 펴 보 자.
전단 시 뮬 레이 션 데이터
우 리 는 전단 에서 데 이 터 를 시 뮬 레이 션 합 시다.매 뉴 얼
// ――
const subject = [
{ id: 1, name: ' ' },
{ id: 2, name: ' ' },
{ id: 3, name: ' ' },
{ id: 4, name: ' ' }
]
// ――
const student = [
{ id: 1, name: ' ' },
{ id: 2, name: ' ' },
{ id: 3, name: ' ' },
{ id: 4, name: ' ' }
]
// ――
const classes = [
{ id: 1, name: ' ' },
{ id: 2, name: ' ' }
]
// ――
const exam = [
{ id: 1, name: ' ' },
{ id: 2, name: ' ' }
]
// ――
const reportCard = [
// ID ID 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 }
]element-plus 는 강력 한 표 구성 요소 인 el-table 을 제공 하여 정렬,너비 조정,색상 설정,선별 등 여러 가지 기본 기능 을 실현 할 수 있 습 니 다.그러면 우 리 는 이 구성 요 소 를 사용 하여 성적 표를 실현 할 수 있다.
표 머리 를 확정 하 다
행렬 전환 의 큰 특징 은 표 두(몇 열 이 있 는 지)가 고정된 것 이 아니 라 동적 으로 생 성 되 어야 한 다 는 것 이다.
성적표 의 경우 표 두 열 수 는 학과 가 결정 하고 학과 가 많 을 수록 표 두 도 많아 진다.
우선 우 리 는 el-table 의 요구 에 따라 표 두 를 설정 합 니 다.
/**
*
* * 、 、【 】、 、 、
*/
const createTableHead = () => {
//
const head = [
{
prop: 'id',
label: ' ',
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
}
우 리 는 간단 하고 거 친 방식 으로 먼저 고정 열 을 추가 한 다음 에 학 과 를 옮 겨 다 니 며 동적 열 을 추가 합 니 다.
확정 데이터
표 머리 가 확 정 된 후에 우 리 는 data 부분 을 확인 하고 본 격 적 으로 행렬 전환 을 시작 해 야 한다.
아니면 el-table 의 필요 에 따라 데이터 형식 을 정의 합 니까?
{
id: 1,
name: ' ',
sub_1: 100,
sub_2: 100,
...
totalScore: 200,
averageScore: 100,
ranking: 1
}
이렇게 하면 후속 적 으로 데 이 터 를 추가 하 는 데 편리 하 다.
성적 표를 옮 겨 다 니 며 데 이 터 를 채 웁 니 다.
/**
*
*/
const rowToCol = () => {
//
const _code = {}
//
const _arr = []
//
for (const key in reportCard) {
const rep = reportCard[key]
if(typeof _code[rep.studentId] === 'undefined') {
// 。 ，
_code[rep.studentId] = {
id: rep.studentId, // ID
name: (student.filter((item)=>item.id === rep.studentId)[0] || {name:''}).name, // id
totalScore: 0, // ，
averageScore: 0, // ，
ranking: 1 // ，
}
}
//
_code[rep.studentId]['sub_' + rep.subjectId] = rep.score
}
// 、
//
return _arr
}
학생 의 총 점 과 평균 점 수 를 계산 하 다
일반 성적 표 는 학생 들 의 총 점 과 평균 점 수 를 받 아야 하기 때문에 우 리 는 성적 통계 총 점 과 평균 점 수 를 두루 훑 어 볼 수 있다.
...
// 、
for(const key in _code) {
const code = _code[key]
//
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 // 。
// (total / count ).toFixed(2)
}
}
code.totalScore = total
code.averageScore = ave
//
_arr.push(code)
}
성적표 가 나 왔 으 니 우 리 는 또 하나의 순 위 를 만들어 야 한다.
순위 가 필요 하지 않 으 면 이 단 계 를 뛰 어 넘 을 수 있다.
let _ranking = 0
_arr.sort((a, b) => {
//
return b.totalScore - a.totalScore
}).forEach((item) => {
//
_ranking++
_arr.find((a) => a.id === item.id).ranking = _ranking
})
이것 도 비교적 흔히 볼 수 있 는 수요 다.
el-table 은 자동 적 으로 화 해 를 구 하 는 기능 을 제공 하 는 동시에 사용자 정의 화 해 를 구 하 는 방법 도 제공 합 니 다.우 리 는 그 를 이용 하여 학과 의 평균 점 수 를 실현 할 수 있 습 니 다.
다음은 홈 페이지 에서 제시 한 방법 입 니 다.원래 화 해 를 구 하 는 것 이 었 는데 조금 만 수정 하면 학과 의 평균 점 수 를 받 을 수 있 습 니 다.
//
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
그리고 몇 번 의 return 은 소 용이 없고 마지막 이 어야 효과 가 있 기 때문에 판단 을 추가 했다.
각 과목 의 최고점 과 최저점 을 기록 하 다
한 장의 성적 표 는 학과 의 최고 점수,최저 점 수 를 보 는 등 각종 데 이 터 를 계산 할 수 있다.
일반적으로 이러한 통계 데 이 터 를 주목 할 수 있 습 니 다.마찬가지 로 저 희 는 사용자 정의 구 화 방법 으로 수 요 를 실현 할 수 있 습 니 다.저 희 는 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
// ，
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] = ' '
return sums
}
같은 이치 로 우리 가 합격 자 수,각 단락 의 인원 수 를 통계 할 수 있다.
정렬 기능 추가
이것 은 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>
색상 구분 추가
평균 점 수 를 60 보다 낮 게 하려 면 어떻게 해 야 합 니까?el-table 도 기능 을 제공 합 니 다.판단 설정 css 를 하면 됩 니 다.
//
const tableRowClassName = ({row, rowIndex}) => {
if (row.averageScore < 60) { //
return 'warning-row';
} else if (row.averageScore > 95) { // 95
return 'success-row';
}
return '';
}
https://gitee.com/naturefw/nf-vite2-element
작은 매듭
장점:
4.567917.백 엔 드 가 행렬 전환 을 할 필요 가 없고 기본 데 이 터 를 제공 하면 백 엔 드 성능 자원 을 절약 할 수 있 습 니 다4.567917.기능 이 비교적 전면적 이 고 내 가 생각 할 수 있 는 기본 은 모두 더 해 졌 다단점:
4.567917.일반적인 형식 으로 만 들 지 못 했 고 다른 행렬 전환 에 대한 수 요 는 코드 를 작성 해 야 합 니 다vue 3+el-table 이 행렬 전환 을 실현 하 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue 3 행렬 전환 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
