Vue3+el-tableは行と列の変換を実現します

// 件名 - 列を決定する const subject = [
  { id: 1, 名前: '数学' },
  { id: 2、名前: '中国語' }、
  { id: 3, 名前: '物理学' },
  { id: 4、名前: '化学' }
]

// 学生 - 行を決定する const student = [
  { id: 1, name: '张三' },
  { id: 2, 名前: 'Li Si' },
  { id: 3, 名前: '王五' },
  { id: 4、名前: '趙劉' }
]

// クラス - const に基づく分類 classes = [
  { id: 1, name: '1年生1年生' },
  { id: 2、名前: 'クラス2、グレード1' }
]

//試験 - 分類基準 const exam = [
  { id: 1, name: '中間試験' },
  { id: 2、名前: '期末試験' }
]

// スコア - コンテンツを決定する const reportCard = [
  //シリアル番号 試験ID クラスID 学生ID 科目ID スコア { id: 1, examId: 1, classId: 1, studentId: 1, subjectId: 1, score: 100 },
  { id: 2、試験 ID: 1、クラス ID: 1、学生 ID: 1、科目 ID: 2、スコア: 98 },
  { id: 3、試験ID: 1、クラスID: 1、学生ID: 1、科目ID: 3、スコア: 90 },
  { id: 4、試験ID: 1、クラスID: 1、学生ID: 2、科目ID: 1、スコア: 90 },
  { id: 5、試験ID: 1、クラスID: 1、学生ID: 2、科目ID: 2、スコア: 90 },
  { id: 6、試験ID: 1、クラスID: 1、学生ID: 2、科目ID: 3、スコア: 40 },
  { id: 7、試験ID: 1、クラスID: 1、学生ID: 3、科目ID: 1、スコア: 30 },
  { id: 8、試験ID: 1、クラスID: 1、学生ID: 3、科目ID: 2、スコア: 90 },
  { id: 8、試験ID: 1、クラスID: 1、学生ID: 3、科目ID: 3、スコア: 40 },
  { id: 9、試験ID: 1、クラスID: 1、学生ID: 4、科目ID: 1、スコア: 64 },
  { id: 8、試験ID: 1、クラスID: 1、学生ID: 4、科目ID: 2、スコア: 90 },
  { id: 9、試験 ID: 1、クラス ID: 1、学生 ID: 4、科目 ID: 3、スコア: 70 }
]

/**
 * 科目に基づいて表のヘッダーを作成します* * 学生ID、名前、[科目]、合計点、平均点、順位*/
const createTableHead = () => {
  // 生徒を追加 const head = [
  {
    プロパティ: 'id',
    ラベル: '学生番号'、
    幅: 120
  },
  {
    プロパティ: '名前',
    ラベル: '名前',
    幅: 120
  }]

  // 件名を追加 for (const key in subject) {
    const sub = subject[キー]
    head.push({
      プロパティ: 'sub_' + sub.id,
      ラベル: サブ名、
      幅: 120
    })
  }

  head.push({
    プロパティ: 'totalScore',
    ラベル: '合計スコア'、
    幅: 120
  })
  head.push({
    プロパティ: 'averageScore',
    ラベル: '平均スコア'、
    幅: 120
  })
  head.push({
    プロパティ: 'ランキング'、
    ラベル: 'ランク'、
    幅: 120
  })
  
  リターンヘッド
}

{
  id: 1,
  名前: '張三'、
  サブ_1: 100,
  サブ_2: 100,
  ...
  合計スコア: 200,
  平均スコア: 100,
  ランキング: 1
}

/**
 * 行と列の変換 */
定数 rowToCol = () => {
  // オブジェクトベースのスコアリスト const _code = {}
  // 配列形式のスコアのリスト const _arr = []

  // レポートカードを走査します for (const key in reportCard) {
    const rep = reportCard[キー]
    if(typeof _code[rep.studentId] === 'undefined') {
      // レコードがありません。生徒の成績の行を作成し、固定列 data_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[キー]
    // 主題を走査する let total = 0
    ave = 0とする
    カウントを 0 にする
    for (const キー in subject) {
      const fenshu = code['sub_' + subject[key].id]
      if (typeof fenshu !== 'undefined') {
        // スコアがあるので、合計スコアと平均スコアの数を計算します++
        合計 += フェンシュ
        ave = Math.floor(total / count * 10) / 10 // 小数点第1位を保持します。
        // 小数点以下2桁を保持したい場合は、(total / count).toFixed(2) とします。
      }
    }
    code.totalScore = 合計
    code.averageScore = 平均
    //オブジェクトデータを配列に変換する data_arr.push(code)
  }

  _ranking = 0 とします
  _arr.sort((a, b) => {
    // 合計スコアの逆順に b.totalScore - a.totalScore を返す
  }).forEach((項目) => {
    // ランキングを設定する _ranking++
    _arr.find((a) => a.id === item.id).ranking = _ranking
  })

 // 各科目の平均スコアを計算する let i = 0
const getSummaries = (パラメータ) => {
  私は++
  (i < 7) の場合 [] を返す

  const {列、データ} = param;
  定数の合計 = [];
  
  columns.forEach((列, インデックス) => {
    （インデックス === 0）の場合{
      sums[index] = '平均スコア'
      戻る
    }
    const values ​​= data.map(item => Number(item[column.property]));
    if (!values.every(値 => isNaN(値))) {
      sums[index] = values.reduce((prev, curr) => {
        定数値 = Number(curr)
        if (!isNaN(値)) {
          前へ + 次へ
        } それ以外 {
          前へ戻る
        }
      }, 0);
      sums[index] = Math.floor(sums[index] / values.length * 10) / 10
    } それ以外 {
      sums[index] = 'N/A';
    }
  })
  
  合計を返す

// 各科目の平均スコア、最高スコア、最低スコアを計算します。const getSummaries = ({ columns }) => {
  私は++
  (i < 7) の場合 [] を返す

  定数の合計 = [];
   
  columns.forEach((item, index) => {
    (item.property.indexOf('sub_') >= 0 )の場合{
      定数 subjectId = item.property.replace('sub_', '')*1
      // 件名、平均を計算します。ave = 0
      合計を0とする
      最大値を0とする
      最小値を99999とする
      const _arr = reportCard.filter((r) => r.subjectId === subjectId)
      _arr.forEach((アイテム、インデックス) => {
        sum += item.score // 合計 if (max < item.score) max = item.score // 最高スコアを記録 if (min > item.score) min = item.score // 最低スコアを記録 })
      _arr.length === 0 の場合 {
        sums[index] = '-' // スコアなし} else {
        // 平均スコアを計算する ave = Math.floor(sum/_arr.length * 10) / 10
        合計[インデックス] = `${ave}(${max}-${min})`
      }
    } それ以外 {
      // 計算しない sums[index] = ''
    }
  })
  sums[0] = '統計'
  合計を返す

}

<el-テーブル
    :data="テーブルデータ"
    スタイル="幅: 100%;高さ: 300px;"
    :default-sort = "{prop: 'totalScore', order: 'descending'}"
    :row-class-name="テーブル行クラス名"
    国境
    概要を表示
    :summary-method="getSummaries"
  >
    <el-テーブル列
      v-for="(item, index) in tableHead"
      :key="'s'+ インデックス"
      修理済み
      並べ替え可能
      :prop="アイテム.prop"
      :label="アイテム.ラベル"
      :width="アイテムの幅">
    </el-table-column>
  </el-table>

// 色 const tableRowClassName = ({row, rowIndex}) => {
  if (row.averageScore < 60) { // 平均スコアが不合格の学生は 'warning-row' を返します。
  } else if (row.averageScore > 95) { // 平均スコアが 95 を超える学生は 'success-row' を返します。
  }
  戻る '';
}