如何在 table (b-table) 的末尾添加自定义行

Question

我需要将自定义行（不同于之前的行）添加到我的网格 b-table 最后。我怎样才能做到这一点？我有网格 物品 |数额 |价格 在最后一行，我需要计算 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 插槽

您可以在"Footer"部分查看Buefy's documentation for the table component（我无法直接link）。

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

带有额外项的计算数组

在 returns items 数组的组件中添加一个计算 属性 并附加一个额外的项目。

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

记得将 b-table 的 items 属性更改为新计算的 属性。您还必须区分常规项目和列模板中的自定义最后一行项目。

我建议使用 footer 插槽，因为您可以避免将项目数组与自定义的额外项目混在一起。