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)=>return value>0?'danger':''success'
的方法吗?
不走运.. variant: (value) => return 'danger'
-> 这被忽略了(无风格)variant: 'danger'
-> 这有效。无论如何,我认为这会影响整个列,而不仅仅是我需要的行。我需要的是设置'items'数组中每个元素的_cellVariants
参数
【参考方案1】:
您可能需要computed property
。计算属性会根据它们所依赖的反应变量的变化自动更新。
以下示例实现了一个计算属性styledItems
,您必须使用它来代替模板中的items
。它返回items
的1 深度副本,即包含每个项目的副本的新数组,并添加了额外的_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
添加到项目中,您可以使用名为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>
【讨论】:
太棒了!将此标记为正确,因为两个答案基本相同。我需要一个“编辑”数据的计算属性!【参考方案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 2.0 中的列创建动态输入过滤器
如何使用 Bootstrap-Vue 从父组件折叠/展开多个动态折叠?