欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)目場(chǎng)景

展示學(xué)生考試的成績(jī)，只有學(xué)號(hào)和姓名是固定的，后面的科目并不是固定的展示所有科目，是根據(jù)接口返回的有成績(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)文章

最新評(píng)論