javascript - 如何在表格末尾添加自定义行(b-table)
问题描述
我需要在最后将自定义行(与之前的行不同)添加到我的网格 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€**
如何添加最后一行(它必须始终在底部)
解决方案
关于如何实现这一目标,我可以想到两种可能性:
- 使用
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 */ }
];
}
}
请记住将items
prop of更改b-table
为新的计算属性。您还必须区分常规项目和列模板内的自定义最后一行项目。
我建议使用footer
插槽,因为您可以避免将您的项目数组与自定义额外项目混合。
推荐阅读
- swift - Swift AVAssetDownloadURLSession 不会启动
- keycloak - 在 keycloak 启动期间,从目录中缓慢导入领域和用户
- python-3.x - 将数据帧转换为所需的字典格式
- fuzzy-logic - 如何制定模糊规则?
- javascript - 从 laravel 获取数据选项
- python - Python Scrapy - 是否可以在 Scrapy 中处理那个长链接?如果是这样,为什么它会抛出该错误
- python - Python 从另一个类调用一个类
- python - python discord.py 后台任务停止主函数
- php - 什么是 composer-installer 类型的 Composer 包?
- opc-ua - 如何在 Eclipse Milo 中连接 kepware-ua-server