时间戳

首页 > 解决方案 > Bootstrap-vue - 动态设置表变体

javascript - Bootstrap-vue - 动态设置表变体

问题描述

所以我正在使用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 单元格的任何想法？

这是它在文档中完成的方式，它实际上设置在“项目”数组中，但是在像我这样从网络服务获取数据的情况下，这有什么用处？：

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

所以我想我需要的是一种设置方法，我需要设置_cellVariants'items'数组中每个元素的参数。

标签： javascripttwitter-bootstrapvue.jsvuejs2bootstrap-vue

解决方案

您可能需要一个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)
              }
            })
          }
        })

推荐阅读