Bootstrap-vue - 動態設置表變量

Question

所以我在這個測試應用程序中使用Bootstrap Vue 。 我正在嘗試根據它的值更改表格單元格的變體。 不幸的是，variant 參數不會采用函數，所以我對如何實現這一點一無所知。

這是我的代碼：

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”數組中，但是在像我這樣從 Web 服務獲取數據的情況下，這有什么用？：

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

所以我想我需要的是一種設置我需要的方法是設置 'items' 數組中每個元素的_cellVariants參數。

Answer 1

您可能需要一個computed property 。 計算屬性會根據它們所依賴的反應變量的變化自動更新。

以下示例實現了一個計算屬性styledItems ，您必須使用它來代替模板中的items 。 它返回items的1-deep copy ，即一個包含每個 item 副本的新數組，並添加了額外的_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)
              }
            })
          }
        })

Answer 2

如果您想向項目添加variant ，您可以使用名為cptItems的computed屬性並將其定義如下：

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>

Answer 3

@John 的回答對我有用。 我沒有足夠的聲譽來發表評論或有用

tdClass: (type, key, item) => {
        switch (type) {
          case "value":
            return "bg-warning text-white";
            break;
          case "value":
            return "bg-danger text-white";
            break;
          case "value":
            return "bg-info text-white";
            break;
          default:
            break;
        }
      },

Answer 4

我確信上面的答案會解決我自己的問題，但他們沒有。 我發現了一種不同的方法來為表格單元格着色： https : //github.com/bootstrap-vue/bootstrap-vue/issues/1793

除了使用變體為表格單元格着色之外。 相反，我們使用 tdclass 和一個函數。

<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>

對於我自己的用例，我需要比較同一行的兩個單元格，然后將一個類應用於一個。

...
      {
        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';
  },
}
...

也許這會幫助某人，如果不是 OP。