Shulou(Shulou.com)05/31 Report--

This article mainly explains how vue uses el-table to traverse loop headers and table body data. Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how vue uses el-table to traverse loop headers and table body data".

Use el-table to traverse loop header and body data

This is the header data.

This is the table body data.

The result of the final cycle

The final aggregate uses the original aggregate function of el-table. When this data is looped out, it is also summed up in the last line of nos, but this kind of data is not wanted in the table, so I have added a judgment here.

Let his sum be empty when his index is 0.

El-table dynamic loop displays headers and data project scenarios

To show the students' examination results, only the student number and name are fixed. The following subjects are not fixed to show all subjects, but are rendered according to the scored data returned by the API. For more information, please see the figure below:

Problem description

The data structure returned by the API is as follows: for the following subjects to be displayed in a loop, you can select the first item of list as the head of the loop out of the table, and then obtain the scores according to their respective row.

The code is as follows:

{{scope.row.scoreVOList [index] .score}} / / get datathis.headerList = data.list [0] .scoreVOList after requesting the interface. Now that you have a better understanding of "how vue uses el-table to traverse loop header and body data", you might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.