因此,我在此测试应用中使用了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
参数。
答案 0 :(得分:2)
您可能需要computed property
。计算的属性会自动更新它们所依赖的反应变量。
以下示例实现了计算属性styledItems
,您必须在模板中使用该属性代替items
。它返回items
的 1-deep副本,即一个包含每个项目副本的新数组,并添加了额外的_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)
}
})
}
})
答案 1 :(得分:1)
如果要将variant
添加到项目,则可以使用名为computed
的{{1}}属性,并按如下所示对其进行定义:
cptItems
并在模板中使用该属性,如:
computed:{
cptItems(){
return this.items.map((item)=>{
let tmp=item;
item.OBJETIVO>0?tmp.variant='danger':tmp.variant='success';
return tmp;
})
}
答案 2 :(得分:0)
我确信上面的答案可以解决我自己的问题,但没有。我找到了另一种为表格单元着色的方法: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。