在模板中设置 2 个键 #cell bootstrap table

Question

早上好，我想对来自 2 个不同字段的值进行乘法运算，我已经对我的情况下的那部分代码进行了评论。我很困惑，因为我只能在模板中调用 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>

在模板中设置 2 个键 #cell bootstrap table

Set 2 keys in template #cell bootstrap table

vue.js

bootstrap-4

bootstrap-vue

例子