vue如何使用el-table遍歷循環(huán)表頭和表體數(shù)據(jù)
更新時間：2022年04月26日 14:33:14 作者：jasmine0178
這篇文章主要介紹了vue如何使用el-table遍歷循環(huán)表頭和表體數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
使用el-table遍歷循環(huán)表頭和表體數(shù)據(jù)
這是表頭數(shù)據(jù)
這是表體數(shù)據(jù)
最終循環(huán)出來的結(jié)果
最后的合計使用的是el-table的原始合計功能，這個數(shù)據(jù)循環(huán)出來的時候在nos的最后一行也進行了總和，但是表格中是不希望有這樣的數(shù)據(jù)出現(xiàn)的，所以在這里我有加了一個判斷
當他的index為0的時候讓他的總和為空。
el-table動態(tài)循環(huán)展示表頭和數(shù)據(jù)
項目場景
展示學生考試的成績，只有學號和姓名是固定的，后面的科目并不是固定的展示所有科目，是根據(jù)接口返回的有成績的數(shù)據(jù)進行渲染的，具體見下圖：
問題描述
接口返回的數(shù)據(jù)結(jié)構(gòu)如下：后面的科目要進行循環(huán)展示，可以選定list的第一項作為頭部循環(huán)出表格的頭部，分數(shù)再根據(jù)各自的row進行獲取
代碼如下：
<el-table :data="tableData.tableList" style="width: 100%" 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;
問題解決~~以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3中實現(xiàn)響應(yīng)式數(shù)據(jù)的方法是就是使用ref和reactive,所謂響應(yīng)式就是界面和數(shù)據(jù)同步,能實現(xiàn)實時更新,下面這篇文章主要給大家介紹了關(guān)于Vue3中ref和reactive的相關(guān)資料,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue使用自定義的icon圖標的方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-05-05
這篇文章主要為大家詳細介紹了vue3.0翻牌數(shù)字組件使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
詳解基于vue-cli3快速發(fā)布一個fullpage組件
這篇文章主要介紹了詳解基于vue-cli3快速發(fā)布一個fullpage組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
在現(xiàn)代前端開發(fā)中,組件的重用性和異步加載是提升用戶體驗和優(yōu)化性能的關(guān)鍵因素,在Vue 3中,創(chuàng)建異步組件變得更為便利,本文將探討如何在Vue 3中使用setup語法糖來創(chuàng)建異步組件,感興趣的小伙伴跟著小編一起來看看吧2024-09-09
這篇文章主要介紹了使用Vue逐步實現(xiàn)Watch屬性詳解，watch對象中的value分別支持函數(shù)、數(shù)組、字符串、對象，較為常用的是函數(shù)的方式，當想要觀察一個對象以及對象中的每一個屬性的變化時，便會用到對象的方式2022-08-08
這篇文章主要介紹了vue利用axios來完成數(shù)據(jù)的交互,本文通過實例代碼給大家講解數(shù)據(jù)交互方法及安裝方法,需要的朋友可以參考下2018-03-03
vite項目的根目錄中的env.d.ts類型聲明文件里要寫什么
這篇文章主要介紹了vite項目的根目錄中的env.d.ts類型聲明文件里要寫什么,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue封裝一個TodoList的案例與瀏覽器本地緩存的應(yīng)用實現(xiàn)
這篇文章主要介紹了Vue封裝一個TodoList的案例與瀏覽器本地緩存的應(yīng)用實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04
echarts3如何清空上一次加載的series數(shù)據(jù)
這篇文章主要介紹了echarts3如何清空上一次加載的series數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10