0

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

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

4

1 回答 1

3

关于如何实现这一目标，我可以想到两种可能性：

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

使用footer插槽

您可以在“页脚”部分查看Buefy 的表格组件文档（我无法直接链接它）。

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

带有额外项目的计算数组

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

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

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

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

于 2019-07-08T11:46:21.317 回答