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