3
votes

Bootstrap-vue - Définition dynamique d'une variante de table

J'utilise donc Bootstrap Vue avec cette application de test . J'essaie de changer la variante d'une cellule de tableau en fonction de sa valeur. Malheureusement, le paramètre variant ne prendra pas de fonction, donc je n'ai plus d'idées sur la façon d'y parvenir.

Voici mon code:

{
    salesperson: 'John',
    Objetivo: 2000,
    _cellVariants: { salesperson: 'success', Objetivo: 'danger'}
  },

Ceci est mon Partie HTML:

<div id="app">  
    <button v-on:click="Cargar">Cargar</button>
    <b-table striped hover :fields="fields" :items="items"></b-table>
</div>

Des idées sur la façon de styliser dynamiquement une cellule Bootstrap-vue?

C'est la façon dont c'est fait dans la documentation, c'est en fait défini dans le tableau "items", mais en quoi est-ce utile dans des cas comme le mien où j'obtiens les données d'un service Web?:

var app = new Vue({
    el: '#app',
    data: {    
        items: [],      //Will be populated through AJAX
        fields: [
        {              
            key: 'Vendedor',
            label: 'Vendedor'                 
        },       
        {              
            key: 'OBJETIVO',
            label: 'Objetivo',
            formatter: (value) => { return parseFloat(value).toFixed(2)},
            variant: estiloObjetivo //THIS IS NOT WORKING
        }
      ]
    },
    methods: {
        Cargar: function () {
            var salesperson = getCookie('salespersonCode');
            var url_servicio = 'http://MywebService/';
            var self = this;
            $.ajax({
                type: 'GET',
                url: url_servicio + 'ventas/' + salesperson,
                dataType: "json", // data type of response                  
                success: function(data){            
                    self.items = data           
                }
            });
        },
        estiloObjetivo (value) {
                if value > 0 //I need my cell variant to change depeding on this value
                 return 'danger'
                else 
                 return 'success'

        }
    }
})

Donc je suppose que ce dont j'ai besoin est un moyen de définir ce dont j'ai besoin est de définir le paramètre _cellVariants de chaque élément du tableau 'items'.

javascript vue.js vuejs2 twitter-bootstrap bootstrap-vue

2 commentaires

avez-vous essayé quelque chose comme variant: (value) => {return value> 0? 'danger': '' success '} ?

pas de chance .. variante: (value) => {return 'danger'} -> CECI EST IGNORÉ (pas de style) variante: 'danger' -> CELA FONCTIONNE. Quoi qu'il en soit, je pense que cela affectera toute la colonne, pas seulement la ligne dont j'ai besoin. Ce dont j'ai besoin est de définir le paramètre _cellVariants de chaque élément du tableau 'items'

3 Réponses :

2
votes

Si vous souhaitez ajouter une variante aux éléments, vous pouvez utiliser une propriété calculée appelée cptItems et la définir comme suit:

<b-table .... :items="cptItems"></b-table>

et utilisez cette propriété dans votre modèle comme:

computed:{
     cptItems(){
        return this.items.map((item)=>{
               let tmp=item;
                item.OBJETIVO>0?tmp.variant='danger':tmp.variant='success';
                return tmp;

        })  
        }

1 commentaires

Brillant! marquer ceci comme correct car les deux réponses sont fondamentalement les mêmes. Une propriété calculée où je "modifie" les données est ce dont j'avais besoin!

3
votes

Vous avez probablement besoin d'une propriété calculée . Les propriétés calculées sont automatiquement mises à jour lors des modifications apportées aux variables réactives dont elles dépendent.

L'exemple suivant implémente une propriété calculée, styledItems , que vous devez utiliser à la place des éléments dans le modèle. Il renvoie une 1-deep copy de items , c'est-à-dire un nouveau tableau contenant une copie de chaque élément, avec la propriété supplémentaire _cellVariants ajoutée.

new Vue({
      data: {
        items: [ /* your data here */ ]
      },
      methods: {
        estiloObjetivo: value => (value > 0) ? 'danger' : 'success'
      },
      computed: {
        styledItems() {
          return this.data.map(datum =>
            Object.assign({}, datum, {
              _cellVariants: {
                Objetivo: this.estiloObjetivo(datum.Objetivo)
              }
            })
          }
        })

0 commentaires

0
votes

J'étais sûr que les réponses ci-dessus résoudraient mon propre problème, mais elles ne l'ont pas fait. J'ai trouvé une manière différente de colorer les cellules du tableau: https://github.com/ bootstrap-vue / bootstrap-vue / issues / 1793

Ceci est mis à part l'utilisation de variantes pour colorer une cellule de tableau. À la place, nous utilisons tdclass et une fonction.

...
      {
        key: 'DEMAND_QTY',
        sortable: true,
        thClass: 'text-nowrap',
        tdClass: (value, key, item) => {
          return 'table-' + this.demandStatusColor(item);
        },
      },
      { key: 'TOTAL_DEMAND', sortable: true, thClass: 'text-nowrap' },
    ],
  };
},
methods: {
  demandStatusColor(item) {
    return item.DEMAND_QTY < item.TOTAL_DEMAND ? 'danger' : 'success';
  },
}
...

Pour mon propre cas d'utilisation, je devais comparer deux cellules de la même ligne, puis appliquer une classe à une.

<script>
  new Vue({
    el: '#itemView',
    data() {
      return {
        fields: [
          {
            key: 'Objetive',
            sortable: true,
            thClass: 'text-nowrap',
            tdClass: (value, key, item) => {
              return 'table-' + this.getColor(item);
            }
          }
        ],
      };
    },
    methods: {
      getColor(item) {
        return item.Objetive > 0 ? 'danger' : 'success';
      },
    },
  });
</script>

Cela aidera peut-être quelqu'un, sinon OP.

0 commentaires