Bootstrap-vue - 动态设置表变体

Posted

技术标签:

【中文标题】Bootstrap-vue - 动态设置表变体【英文标题】:Bootstrap-vue - Setting table variant dynamically 【发布时间】:2019-06-01 14:16:51 【问题描述】:

所以我在这个测试应用中使用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”数组中设置的,但是在像我这样从网络服务获取数据的情况下,这有什么用处?:


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

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

【问题讨论】:

您尝试过类似variant:(value)=&gt;return value&gt;0?'danger':''success' 的方法吗? 不走运.. variant: (value) =&gt; return 'danger' -> 这被忽略了(无风格)variant: 'danger' -> 这有效。无论如何,我认为这会影响整个列,而不仅仅是我需要的行。我需要的是设置'items'数组中每个元素的_cellVariants参数 【参考方案1】:

您可能需要computed property。计算属性会根据它们所依赖的反应变量的变化自动更新。

以下示例实现了一个计算属性styledItems,您必须使用它来代替模板中的items。它返回items1 深度副本,即包含每个项目的副本的新数组,并添加了额外的_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)
              
            )
          
        )

【讨论】:

【参考方案2】:

如果您想将variant 添加到项目中,您可以使用名为cptItemscomputed 属性并将其定义如下:

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>

【讨论】:

太棒了!将此标记为正确,因为两个答案基本相同。我需要一个“编辑”数据的计算属性!【参考方案3】:

我确信上面的答案会解决我自己的问题,但他们没有。我发现了另一种为表格单元格着色的方法: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。

【讨论】:

【参考方案4】:

@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;
        
      ,

【讨论】:

以上是关于Bootstrap-vue - 动态设置表变体的主要内容,如果未能解决你的问题,请参考以下文章

如何隐藏 bootstrap-vue 表标题行

bootstrap-vue中基于json文件动态生成元素

如何为 bootstrap-vue 2.0 中的列创建动态输入过滤器

如何使用 Bootstrap-Vue 从父组件折叠/展开多个动态折叠?

bootstrap-vue 表没有填充我的数据库数据[重复]

bootstrap-vue 切换扩展表行