如何在表格末尾添加自定义行（b-table）

Question

我需要在最后将自定义行（与之前的行不同）添加到我的网格 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>

<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 */ }
    ];
  }
}

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

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