Javascript 如何在表的末尾添加自定义行（b表）

我需要将自定义行（不同于以前的行）添加到最后的网格b表中。我该怎么做？我和你有关系 项目|金额|价格 在最后一行，我需要计算项目的总金额和总价格

<template>
    <div>
        <b-table
                striped hover :busy="isBusy" :fields="fields" :items="items" :show-empty="true"
                :empty-text="'Nebyly nalezeny žádné záznamy'" class="mb-0"
        >

            <template slot="name" slot-scope="data">
                <div class="form-group">
                    <b-form-input type="text" class="form-control w-100" size="sm" v-model.lazy="data.item.name">
                    </b-form-input>
                </div>
            </template>

            <template slot="unit_price" slot-scope="data">
                <div class="form-group">
                    <b-form-input type="number" class="form-control w-100" size="sm" v-model.number="data.item.unit_price" @change="updatePriceTogether(data.item)">
                    </b-form-input>
                </div>
            </template>

            <template slot="amount" slot-scope="data">
                <div class="form-group">
                    <b-form-input type="number" class="form-control w-100" size="sm" v-model.number="data.item.amount" @change="updatePriceTogether(data.item)">
                    </b-form-input>
                </div>
            </template>

            <div slot="table-busy" class="text-center text-danger my-2">
                <b-spinner class="align-middle"></b-spinner>
                <strong>Načítání...</strong>
            </div>
            <template slot="actions" slot-scope="data">
                <slot name="action-buttons" :data="data"></slot>
            </template>

        </b-table>
    </div>
</template>

---

如何添加最后一行（它必须始终位于底部）

我可以想出两种方法来实现这一点：

• 使用

  页脚

  插槽
• 使用computed属性向表示自定义行的

  items

  数组追加一个额外项

使用

页脚

插槽 您可以查看“页脚”部分（我无法直接链接它）

请记住将

b-table

的

项

属性更改为新的计算属性。您还必须在列模板中区分常规项和自定义的最后一行项

---

我建议使用

页脚

槽，因为这样可以避免将项目数组与自定义的额外项目混合使用。

我可以想到两种可能的方法来实现这一点：

computed: {
  itemsWithTotal() {
    return [
      ...this.items,
      { /* data for your last row */ }
    ];
  }
}

• 使用

  页脚

  插槽
• 使用computed属性向表示自定义行的

  items

  数组追加一个额外项

使用

页脚

插槽 您可以查看“页脚”部分（我无法直接链接它）

请记住将

b-table

的

项

属性更改为新的计算属性。您还必须在列模板中区分常规项和自定义的最后一行项

我建议使用

footer

槽，因为这样可以避免将项目数组与自定义额外项目混合

computed: {
  itemsWithTotal() {
    return [
      ...this.items,
      { /* data for your last row */ }
    ];
  }
}

<template slot="footer">
  <!-- Your custom last row goes here -->
</template>

computed: {
  itemsWithTotal() {
    return [
      ...this.items,
      { /* data for your last row */ }
    ];
  }
}