[英]Bootstrap-vue - Setting table variant dynamically
所以我在这个测试应用程序中使用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
参数。
您可能需要一个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)
}
})
}
})
如果您想向项目添加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>
我确信上面的答案会解决我自己的问题,但他们没有。 我发现了一种不同的方法来为表格单元格着色: 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。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.