在模板#单元格引导表中设置2个键

Question

早上好，我想对来自两个不同字段的值进行乘法运算，我已经对代码的这一部分进行了评论，这就是我的情况。我很困惑，因为我只能调用模板中的1个单元格，而我想使用2个不同单元格的乘积

<b-table
:items="this.data.ListGiw"
:fields="fields"
>
<template #cell(qty)="data">
@ {{data.value}} / {{data.value}}
<!-- Here i want to make (qty value x ctns value) -->
</template>
<template #cell(ctns)="data">
<b-badge :variant="status[1][data.value]">
{{ status[0][data.value] }}
</b-badge>
</template>
</b-table>
fields: [
{ key: 'nomor', label: 'Baroce' },
{ key: 'barang', label: 'Goods' },
{ key: 'ctns', label: 'CTNS' },
{ key: 'qty', label: 'Qty' },
],
items: [
{
nomor: 'nomor 1',
barang: 'Baju',
ctns: '10',
qty: '80'
},
{
nomor: 'nomor 2',
barang: 'Celana',
ctns: '12',
qty: '90'
},
]

Answer 1

单元格槽作用域具有该行的整个项，您可以使用该项访问该项的其他属性。

<template #cell(qty)="data">
{{ data.item.ctns * data.value }}
</template>

另外，请注意，qty和ctns属性是字符串，而不是数字。

示例

new Vue({
el: '#app',
data() {
return {
fields: [{
key: 'nomor',
label: 'Baroce'
},
{
key: 'barang',
label: 'Goods'
},
{
key: 'ctns',
label: 'CTNS'
},
{
key: 'qty',
label: 'Qty'
},
],
items: [{
nomor: 'nomor 1',
barang: 'Baju',
ctns: '10',
qty: '80'
},
{
nomor: 'nomor 2',
barang: 'Celana',
ctns: '12',
qty: '90'
},
]
}
}
})

<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.css" />
<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>

<div id="app">
<b-table :items="items" :fields="fields">
<template #cell(qty)="data">
{{ parseInt(data.item.ctns) * parseInt(data.value) }}
</template>
</b-table>
</div>