web-dev-qa-db-fra.com

Bootstrap Vue Modèle de table dynamique

Je travaille avec Bootstrap Vue Composant de table JS pour créer une table de données: https://bootstrap-vue.js.org/docs/ composants/table

Je suis nouveau sur VueJS et je ne sais pas comment aborder ce problème, ce qui rend la recherche d'une solution encore plus compliquée.

J'utilise un point de terminaison API pour renvoyer des données JSON:

{
   "options":{
      "filter":false
   },
   "fields":[
      {
         "key":"id",
         "label":"Id",
         "editLink":false,
         "display":true,
         "sortable":true,
         "class":"shrink"
      },
      {
         "key":"name",
         "label":"Name",
         "editLink":true,
         "display":true,
         "sortable":true
      }
   ],
   "data":[ ]
}

Voici mon modèle de table:

<b-table striped hover bordered foot-clone class="table-sm"
   :items="users" :fields="displayedFields" :per-page="perPage" :current-page="currentPage" :filter="filter"
   @filtered="onFiltered"
   >
   <template v-for="(field, index) in fields">
      <template slot="{{field.key}}" slot-scope="row" v-if="field.editLink">
         <router-link :to="'/user/' + row.item.id" v-bind:key="index"></router-link>
      </template>
   </template>
   <template slot="status" slot-scope="row">
      <toggle-button :width="36" :height="18" v-model="row.status" :labels="false" :colors="{checked: '#00FF00', unchecked: '#FF0000', disabled: '#CCCCCC'}"/>
   </template>

</b-table>

La première balise de modèle est une tentative d'une supposition sauvage. Je veux pouvoir sélectionner conditionnellement une table pour une colonne dans la configuration des champs. Vous pouvez voir dans ma tentative que je veux mettre un RouterLink lorsque la configuration du lien editLink est vraie.

Comment puis-je faire cela?

javascriptvue.jsbootstrap-vue
7
nebulousGirl

Voici un jsfiddle montrant des colonnes dynamiques avec une b-table: https://jsfiddle.net/nardnob/wvk6fxgt/

new Vue({
        el: "#app",
        data: {
   fields: [{
     key: "id",
     label: "Id",
     colType: "span"
   }, {
     key: "name",
     label: "Name",
     colType: "button"
   }, {
     key: "uhh",
     label: "uhh..",
     colType: "idk"
   }],
   items: [{
        id: 0,
    name: "Test 0"
   }, {
        id: 1,
    name: "Test 1"
   }, {
        id: 2,
    name: "Test 2"
   }]
        }
});
<div id="app">
  <b-table :items="items" :fields="fields">
    <template v-for="(field, index) in fields" :slot="field.key" slot-scope="data">
      <div v-if="field.colType === 'button'">
        <h5>{{data.item.name}}</h5>
        <b-button>Am Button</b-button>
      </div>
      <div v-else-if="field.colType === 'span'">
        <h5>{{data.item.name}}</h5>
        <span>Am Span</span>
      </div>
      <div v-else>
        <h5>{{data.item.name}}</h5>
        Am Confused
      </div>
    </template>
  </b-table>
</div>
3
nardnob