javascript - Vue循环csv按值过滤

Question

使用 vue.js 我们有一个 csv 文件，我们需要遍历每一行并按照下面的模板显示。不确定如何按列中的值对循环中的行进行分组。

这是 CSV 的示例：

OrganisationName    Event   TeamName    Lname   Fname   IDnum   Capt
Airservices Australia   Golf Corporate Team Open (Non Handicap) Airservices 1   Fisher  Dean    584968  
Airservices Australia   Golf Corporate Team Open (Non Handicap) Airservices 1   Ranieri Anthony 126152  Capt
Airservices Australia   Golf Corporate Team Open (Non Handicap) Airservices 1   Schutz  Daniel  585175  
Airservices Australia   Golf Corporate Team Open (Non Handicap) Airservices 1   Turton  Alex    579067  
Airservices Australia   Golf Men Open (Handicap)        Telford Clinton 579160  
Airservices Australia   Golf Men Open (Handicap)        Thompson    Brett   125229  
Airservices Australia   Golf Men Open (Non Handicap)        Fisher  Dean    584968  
Airservices Australia   Golf Men Open (Non Handicap)        Ranieri Anthony 126152  
Arcadis Soccer 6's Men Open Arcadis Brocchi Bruno   592392  Capt
Arcadis Soccer 6's Men Open Arcadis Chau    Edmund  154038  
Arcadis Soccer 6's Men Open Arcadis Dillon  Aaron   597094  
Arcadis Soccer 6's Men Open Arcadis Donald  Alexander   567159  
Arcadis Soccer 6's Men Open Arcadis Loschiavo   Diego   592395  
Arcadis Soccer 6's Men Open Arcadis Vanegas Felipe  507278  
Jumbo Interactive   Tennis Singles Men 40+      Veverka Mike    586239  
Pensar  Tenpin Bowling Singles Men Handicap Open        Moyle   Lance   591491  

模板需要看起来像：

<div v-for="organisation in data.organisations" :key="index">          
<h2 v-if="organisation">{{organisation.OrganisationName}}</h2>   
<!-- Show the Organisation name once eg.Airservices Australia -->
    <div v-for="event in xxx.events" :key="event.eventname">
    <!-- Show each event under an organisation eg. for Airservices Australia it would be 'Golf Corporate Team Open (Non Handicap)' & 'Golf Men Open (Handicap)' -->           
            <h4>{{  event.eventname }}</h4>
            <table class="table table-striped">
                <tr>
                    <th></th>
                    <th v-if="event.players[0].TeamName">Team Name</th>
                    <th>Games ID Status</th>
                </tr>   
                <tr v-for="player in event.players" :key="index">       
                    <td>{{ player.Fname }} {{ player.Lname }}</td>
                    <td class="nowrap" v-if="!player.TeamName == ''">{{ player.TeamName }}<span v-if="player.Capt"> - Captain</span></td>
                    <td>{{ player.OAstatus }}</td>
                </tr>    
            </table>    
    </div>

标签： javascriptcsvvue.js