vue怎么使用el-table遍歷循環表頭和表體數據

本篇內容主要講解“vue怎么使用el-table遍歷循環表頭和表體數據”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vue怎么使用el-table遍歷循環表頭和表體數據”吧!

使用el-table遍歷循環表頭和表體數據

這是表頭數據

這是表體數據

最終循環出來的結果

最后的合計使用的是el-table的原始合計功能，這個數據循環出來的時候在nos的最后一行也進行了總和，但是表格中是不希望有這樣的數據出現的，所以在這里我有加了一個判斷

當他的index為0的時候讓他的總和為空。

el-table動態循環展示表頭和數據

項目場景

展示學生考試的成績，只有學號和姓名是固定的，后面的科目并不是固定的展示所有科目，是根據接口返回的有成績的數據進行渲染的，具體見下圖：

問題描述

接口返回的數據結構如下：后面的科目要進行循環展示，可以選定list的第一項作為頭部循環出表格的頭部，分數再根據各自的row進行獲取

代碼如下：

<el-table :data="tableData.tableList"  class="main-table" stripe>
            <el-table-column type="index" label="序號" align="center" width="50"></el-table-column>
            <el-table-column prop="studentNum" label="準考證號" align="center"></el-table-column>
            <el-table-column prop="studentName" label="姓名" align="center"></el-table-column>
            <el-table-column
              v-for="(item,index) in headerList"
              :key="index"
              :label="item.subjectName"
              align="center"
              show-overflow-tooltip
            >
              <template slot-scope="scope">{{ scope.row.scoreVOList[index].score }}</template>
            </el-table-column>
</el-table>
//請求接口后獲取data
this.headerList = data.list[0].scoreVOList;

到此，相信大家對“vue怎么使用el-table遍歷循環表頭和表體數據”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！