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)出來的結(jié)果
最后的合計(jì)使用的是el-table的原始合計(jì)功能，這個(gè)數(shù)據(jù)循環(huán)出來的時(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)目場景
展示學(xué)生考試的成績，只有學(xué)號(hào)和姓名是固定的，后面的科目并不是固定的展示所有科目，是根據(jù)接口返回的有成績的數(shù)據(jù)進(jì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;
問題解決~~以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Element樹形控件整合帶圖標(biāo)的下拉菜單(tree+dropdown+input)
Element UI 官網(wǎng)提供的樹形控件包含基礎(chǔ)的、可選擇的、自定義節(jié)點(diǎn)內(nèi)容的、帶節(jié)點(diǎn)過濾的以及可拖拽節(jié)點(diǎn)的樹形結(jié)構(gòu)，本文實(shí)現(xiàn)了樹形控件整合帶圖標(biāo)的下拉菜單，感興趣的可以了解一下2021-07-07
這篇文章主要介紹了Vue組件的計(jì)算屬性和普通屬性的區(qū)別說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
本篇文章主要介紹了Vue常用指令_V-model用法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03
Vue項(xiàng)目如何在js文件里獲取路由參數(shù)及路由跳轉(zhuǎn)
日常業(yè)務(wù)中路由跳轉(zhuǎn)的同時(shí)傳遞參數(shù)是比較常見的,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目如何在js文件里獲取路由參數(shù)及路由跳轉(zhuǎn)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
Vue 3自定義指令開發(fā)的相關(guān)總結(jié)
這篇文章主要介紹了Vue 3自定義指令開發(fā)的相關(guān)總結(jié)，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
elementui之封裝下載模板和導(dǎo)入文件組件方式
這篇文章主要介紹了關(guān)于elementui之封裝下載模板和導(dǎo)入文件組件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
解決Vue-Router升級(jí)導(dǎo)致的Uncaught (in promise)問題
這篇文章主要介紹了解決Vue-Router升級(jí)導(dǎo)致的Uncaught (in promise)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要為大家詳細(xì)介紹了Vue.js下拉菜單組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
Vue3數(shù)據(jù)更新,頁面沒有同步更新的問題及解決
這篇文章主要介紹了Vue3數(shù)據(jù)更新,頁面沒有同步更新的問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue實(shí)現(xiàn)動(dòng)態(tài)按鈕功能
這篇文章主要介紹了vue實(shí)現(xiàn)動(dòng)態(tài)按鈕功能，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05