web-dev-qa-db-fra.com

Table de l'interface utilisateur des éléments avec colonnes dynamiques

Je cherche un exemple d'utilisation du composant de table Element UI sans avoir à coder en dur toutes les colonnes. Tous les exemples que j'ai vus, y compris les documents officiels de la table de l'interface utilisateur d'élément montrent chaque colonne spécifiée dans le modèle.

J'essaie de faire quelque chose comme ça. Dans mon ancien composant de table, cela me donne toutes les colonnes et ma colonne de fin supplémentaire avec un bouton delete.

<template>
  <div v-if="tableData.length > 0">
    <b-table striped hover v-bind:items="tableData" :fields=" keys.concat(['actions']) ">
      <template slot="actions" slot-scope="row">
        <b-btn size="sm" @click.stop="tableClick(row.item)" class="mr-1">
          Delete
        </b-btn>
      </template>
    </b-table>
  </div>
</template>

En revanche, les exemples de table d'interface utilisateur d'élément utilisent tous plusieurs balises el-table-column Répétées. En raison du chargement de données avec des colonnes différentes lors de l'exécution, je ne peux pas utiliser cette approche.

  <template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="Date"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="Name"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="Address">
      </el-table-column>
    </el-table>
  </template>

Je suis un débutant et j'ai du mal à comprendre comment atteindre mon objectif avec le el-table.

vue.jsvuejs2element-ui
3
BugBuddy

Vous pouvez avoir les colonnes comme un tableau d'objets avec les propriétés nécessaires et les parcourir dans le modèle avec v-for:

<template>
    <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column v-for="column in columns" 
                         :key="column.label"
                         :prop="column.prop"
                         :label="column.label"
                         :formatter="column.formatter"
                         :min-width="column.minWidth">
        </el-table-column>
        <el-table-column fixed="right">
            <template slot-scope="scope">
              ... your delete button or whatever here...
            </template>
    </el-table-column>
    </el-table>
</template>

et puis vous obtenez vos colonnes quelque part, elles pourraient être dans les données par exemple:

data() {
    return {
      columns: [
        {
          prop: 'date',
          label: 'Date',
          minWidth: 180px
        },
        {
          prop: 'name',
          label: 'Name',
          minWidth: 180px
        },
        {
          prop: 'address',
          label: 'Address',
          formatter: (row, col, cell, index) => this.addressFormatter(cell),  //example of a formatter
        },
      ],
    };
},
5
Anoiny