Vue3 + el-table realisiert Zeilen- und Spaltenkonvertierung

// Betreff - Spalte bestimmen const subject = [
  { id: 1, name: 'Mathematik' },
  { id: 2, name: 'Chinesisch' },
  { id: 3, name: 'Physik' },
  { id: 4, name: 'Chemie' }
]

// Student - Zeile bestimmen const student = [
  { id: 1, name: 'Name' },
  { ID: 2, Name: 'Li Si' },
  { ID: 3, Name: 'Name' },
  { ID: 4, Name: "Zhao Liu" }
]

// Klassen - Klassifizierung basierend auf const classes = [
  { id: 1, name: 'Klasse 1, Jahr 1' },
  { id: 2, name: 'Klasse 2, Stufe 1' }
]

//Prüfung - Klassifikationsbasis const exam = [
  { id: 1, name: 'Zwischenprüfung' },
  { id: 2, name: 'Abschlussprüfung' }
]

// Score - Inhalt ermitteln const reportCard = [
  //Seriennummer Prüfungs-ID Klassen-ID Studenten-ID Fach-ID Punktzahl { 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 }
]

/**
 * Erstellen Sie eine Tabellenüberschrift basierend auf dem Fach* * Matrikelnummer, Name, [Fächer], Gesamtpunktzahl, Durchschnittspunktzahl, Rangliste*/
const createTableHead = () => {
  // Schüler hinzufügen const head = [
  {
    Stütze: "id",
    Bezeichnung: 'Matrikelnummer',
    Breite: 120
  },
  {
    Requisite: "Name",
    Bezeichnung: 'Name',
    Breite: 120
  }]

  // Betreff hinzufügen für (const key in subject) {
    const sub = Betreff[Schlüssel]
    Kopf.drücken({
      Eigenschaft: 'sub_' + sub.id,
      Bezeichnung: Untername,
      Breite: 120
    })
  }

  Kopf.drücken({
    Eigenschaft: "totalScore",
    Bezeichnung: 'Gesamtpunktzahl',
    Breite: 120
  })
  Kopf.drücken({
    Eigenschaft: "Durchschnittspunktzahl",
    Bezeichnung: „Durchschnittsnote“,
    Breite: 120
  })
  Kopf.drücken({
    Requisite: "Rangliste",
    Bezeichnung: 'Rang',
    Breite: 120
  })
  
  Rücklaufkopf
}

{
  ID: 1,
  Name: 'Zhang San',
  sub_1: 100,
  unter_2: 100,
  ...
  Gesamtpunktzahl: 200,
  Durchschnittsnote: 100,
  Rang: 1
}

/**
 * Zeilen- und Spaltenkonvertierung */
const rowToCol = () => {
  // Objektbasierte Punkteliste const _code = {}
  // Liste der Punktestände in Array-Form const _arr = []

  // Durchsuche das Zeugnis nach (const key in reportCard) {
    const rep = reportCard[Schlüssel]
    wenn(Typ von _code[rep.studentId] === 'undefiniert') {
      // Keine Datensätze. Erstellen Sie eine Zeile mit Schülerergebnissen und fügen Sie die feste Spalte data_code[rep.studentId] = { hinzu.
        id: rep.studentId, // Studentenausweis
        name: (student.filter((item)=>item.id === rep.studentId)[0] || {name:''}).name, // Den Namen des Studenten basierend auf der ID abrufen totalScore: 0, // Die Gesamtpunktzahl des Studenten in jedem Fach, die später geändert wird averageScore: 0, // Die durchschnittliche Punktzahl des Studenten in jedem Fach, die später geändert wird ranking: 1 // Die Rangliste, die später geändert wird }
    }
    // Notieren Sie die Punktzahlen jedes Fachs_code[rep.studentId]['sub_' + rep.subjectId] = rep.score
  }

  // Berechnen Sie die Gesamtpunktzahl und die Durchschnittspunktzahl wie unten beschrieben. // Berechnen Sie das Ranking wie unten beschrieben. return _arr
}

  ...
  // Gesamtpunktzahl und Durchschnittspunktzahl berechnen für (const key in _code) {
    const code = _code[Schlüssel]
    // Durchlaufe die Themen let total = 0
    sei ave = 0
    lass count = 0
    für (const key in subject) {
      const fenshu = Code ['sub_' + Betreff [Schlüssel].id]
      wenn (Typ von fenshu !== 'undefiniert') {
        // Es gibt Punkte, berechne die Gesamtpunktzahl und den Durchschnittspunktzahlwert++
        Gesamt += Fenshu
        ave = Math.floor(total / count * 10) / 10 // Eine Dezimalstelle behalten.
        // Wenn Sie zwei Dezimalstellen behalten möchten, können Sie dies tun (total / count).toFixed(2)
      }
    }
    code.totalScore = Gesamt
    code.averageScore = Durchschnitt
    //Objektdaten in Array data_arr.push(code) umwandeln
  }

  lass _ranking = 0
  _arr.sort((a, b) => {
    // return b.totalScore - a.totalScore in umgekehrter Reihenfolge der Gesamtpunktzahl
  }).fürJeden((Artikel) => {
    // Rangfolge festlegen _ranking++
    _arr.find((a) => a.id === item.id).ranking = _ranking
  })

 // Berechnen Sie die durchschnittliche Punktzahl jedes Fachs, sei i = 0
const getSummaries = (param) => {
  ich++
  wenn (i < 7) return []

  const { Spalten, Daten } = Param;
  const Summen = [];
  
  Spalten.fürJeden((Spalte, Index) => {
    wenn (Index === 0) {
      sums[index] = 'Durchschnittspunktzahl'
      zurückkehren
    }
    const-Werte = data.map(item => Zahl(item[spalteneigenschaft]));
    wenn (!values.every(Wert => isNaN(Wert))) {
      Summen[Index] = Werte.Reduzieren((vorherige, aktuell) => {
        Konstantwert = Zahl(aktuell)
        wenn (!isNaN(Wert)) {
          Zurück Vorherige + Aktuelle
        } anders {
          Zurück Zurück
        }
      }, 0);
      Summen[Index] = Math.floor(Summen[Index] / Werte.Länge * 10) / 10
    } anders {
      Summen[Index] = "N/A";
    }
  })
  
  Renditesummen

// Berechnen Sie die Durchschnittsnote, die höchste Note und die niedrigste Note für jedes Fach const getSummaries = ({ columns }) => {
  ich++
  wenn (i < 7) return []

  const Summen = [];
   
  Spalten.fürJedes((Element, Index) => {
    wenn (item.property.indexOf('sub_') >= 0 ){
      const subjectId = item.property.replace('sub_', '')*1
      // Betreff, berechne den Durchschnitt let ave = 0
      sei Summe = 0
      sei max = 0
      sei min = 99999
      const _arr = reportCard.filter((r) => r.subjectId === subjectId)
      _arr.forEach((Element, Index) => {
        sum += item.score // Summe wenn (max < item.score) max = item.score // zeichne die höchste Punktzahl auf wenn (min > item.score) min = item.score // zeichne die niedrigste Punktzahl auf })
      wenn (_arr.length === 0) {
        sums[index] = '-' // Keine Punktzahl} else {
        // Berechnen Sie die durchschnittliche Punktzahl ave = Math.floor(sum/_arr.length * 10) / 10
        Summen[index] = `${ave}(${max}-${min})`
      }
    } anders {
      // Keine Summen berechnen[index] = ''
    }
  })
  sums[0] = 'Statistik'
  Renditesummen

}

<el-Tabelle
    :data="Tabellendaten"
    Stil="Breite: 100%;Höhe: 300px;"
    :default-sort = "{prop: 'totalScore', Reihenfolge: 'absteigend'}"
    :row-class-name="Tabellenzeilenklassenname"
    Grenze
    Show-Zusammenfassung
    :summary-method="Zusammenfassungen abrufen"
  >
    <el-table-column
      v-for="(Element, Index) im Tabellenkopf"
      :Schlüssel="'s'+ Index"
      behoben
      sortierbar
      :prop="Artikel.prop"
      :label="Artikel.label"
      :width="Artikelbreite">
    </el-Tabellenspalte>
  </el-Tabelle>

// Farbe const tableRowClassName = ({row, rowIndex}) => {
  if (row.averageScore < 60) { // Studenten, deren Durchschnittspunktzahl nicht ausreicht return 'warning-row';
  } sonst wenn (row.averageScore > 95) { // Studenten mit Durchschnittspunktzahlen über 95 return 'success-row';
  }
  zurückkehren '';
}