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

Question

我需要在最后将自定义行（不同于之前的行）添加到网格b表中。我怎样才能做到这一点？我有网格 物品|金额|价钱 在最后一行中，我需要计算商品的total_amount和total_price。

<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>

<script>
    export default {
        name: "CustomItemGrid",
        props: {
            isBusy: {
                type: Boolean,
                required: true
            },
            fields: {
                type: Array,
                required: true
            },
            items: {
                type: Array,
                required: true
            }
        },
        methods: {
            updatePriceTogether(item){
                item.total_price = (item.unit_price * item.amount).toFixed(2);
            }
        }
    }
</script>

所以我需要这样的东西：

Item_name | Price | Amount | total_ price

Item1     | 12€     | 123  | 1400€

Item2     | 12€     | 123  | 1400€

**EMPTY     | Total:  | XXX T| XXXX€**         

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

Answer 1

我可以想到两种实现方法：

• 使用footer插槽。
• 使用计算所得的属性将一个额外的项目附加到您的items数组中，这将代表您的自定义行。

使用footer插槽

您可以在“页脚”部分中选中Buefy's documentation for the table component（我无法直接将其链接）。

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

带有额外项目的计算数组

在您的组件内添加一个计算属性，该属性将返回items数组并附加一个额外项。

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

请记住将items的{​​{1}}属性更改为新的计算属性。您还必须区分常规项目和列模板中自定义的最后一行项目。

我建议使用b-table插槽，因为这样可以避免将项目数组与自定义的额外项目混合使用。