Maison  >  Article  >  interface Web  >  Comment remplir des données dans un tableau dans vue.js

Comment remplir des données dans un tableau dans vue.js

王林
王林original
2021-10-12 16:16:253916parcourir

Méthode Vue.js pour remplir les données dans le tableau : [async getData(id) {const res = wait this.$store.api.newReq('/xxx/xxx/xxx/' + id).get(); if (...)].

Comment remplir des données dans un tableau dans vue.js

L'environnement d'exploitation de cet article : système Windows10, vue.js 2.9, ordinateur thinkpad t480.

Utilisez vue pour parcourir les données Json, puis remplissez les données dans le Table table.

Code d'affichage :

async getData(id) {
    const res = await this.$store.api.newReq('/xxx/xxx/xxx/' + id).get();
    if (res.code === 0) {

        this.data = res.data;
    }
},

Définir les variables :

 data: {
     base: {},
     baseList:[],
 },

table table display :

<table class="el-table el-table--fit el-table--border table-detail">
    <thead>
        <tr>
            <th>ID</th>
            <th>文章id</th>
            <th>分类名称</th>
            <th>分类等级</th>
            <th>创建时间</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="cm in  data.categoryMapList">
            <td v-text="cm.id"></td>
            <td v-text="cm.docId"></td>
            <td v-text="cm.categoryName"></td>
            <td v-text="cm.categoryLevel"></td>
            <td v-text="cm.createTime"></td>
        </tr>
    </tbody>
</table>

Le rendu est le suivant :

Comment remplir des données dans un tableau dans vue.js

Apprentissage recommandé : formation php

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn