Bootstrap-vue - динамическое задание варианта таблицы - PullRequest
Новая
       43

Bootstrap-vue - динамическое задание варианта таблицы

0 голосов
/ 06 января 2019

Так что я использую Bootstrap Vue с этим тестовым приложением. Я пытаюсь изменить вариант ячейки таблицы в зависимости от ее значения. К сожалению, параметр варианта не будет принимать функцию, поэтому у меня нет идей, как этого добиться.

Это мой код: 

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'

        }
    }
})

Это моя часть HTML: 

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

Есть какие-нибудь идеи о том, как динамически стилизовать ячейку Bootstrap-vue?

Это то, как это делается в документах, на самом деле оно устанавливается в массиве "items", но как это полезно в тех случаях, как мой, когда я получаю данные из веб-службы ?: 

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

Итак, я думаю, что мне нужен способ установить необходимое мне значение - установить параметр _cellVariants каждого элемента в массиве 'items'.

Ответы [ 2 ]

0 голосов
/ 06 января 2019

Вам, вероятно, понадобится computed property. Вычисленные свойства автоматически обновляются при изменении реактивных переменных, от которых они зависят.

В следующем примере реализовано вычисляемое свойство styledItems, которое вы должны использовать вместо items в шаблоне. Он возвращает 1-глубокую копию из items, то есть новый массив, содержащий копию каждого элемента, с добавленным дополнительным свойством _cellVariants. 

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 голосов
/ 06 января 2019

Если вы хотите добавить variant к элементам, вы можете использовать свойство computed с именем cptItems и определить его следующим образом: 

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

        })  
        }

и используйте это свойство внутри шаблона как: 

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