Как переформатировать ячейку B-таблицы для ввода?

Question

Мне нужна помощь, чтобы переформатировать только несколько ячеек b-таблицы для ввода.Я пытался получить значение каждого входа и изменить его на значение, но это не работает.Я нашел это: https://bootstrap -vue.js.org / docs / components / table / # formatter-callback , но я не знаю, как использовать его в моем случае.Спасибо за помощь.

Сетка:

<template>
    <div>
        <slot name="mass-buttons"></slot>
        <b-table
                striped hover :busy="isBusy" :fields="fields" :items="items" :show-empty="true"
                :empty-text="'Nebyly nalezeny žádné záznamy'"
        >
            <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>
            <template slot="HEAD_mass_checkbox">
                <slot name="mass-checkbox-all"></slot>
            </template>
            <template slot="mass_checkbox" slot-scope="data">
                <b-form-checkbox class="mass-checkbox__checkbox" :value="data.item.id"></b-form-checkbox>
            </template>
        </b-table>
    </div>
</template>

<script>
    export default {
        name: "Grid",
        props: {
            isBusy: {
                type: Boolean,
                required: true
            },
            fields: {
                type: Array,
                required: true
            },
            items: {
                type: Array,
                required: true
            },
        }
    }
</script>

РедактироватьКомпонент:

<script>
    import Grid from "./Grid";

    export default {
        name: "InvoiceEdit",
        components:{
            'Grid' : Grid,
        },
        data: () => {
            return {
                gridItemsFields: [
                    {key: 'name', label: 'Název'},
                    {key: 'unit_price', label: 'Cena za jednotku bez DPH'},
                    {key: 'amount', label: 'Množství',formatter:'test'},
                    {key: 'total_price', label: 'Cena celkem bez DPH'},
                    {key: 'actions', label: ''}
                ],
                gridCustomItems:[],
                invoiceId: null,
                invoice: null,
            }
        },
        methods: {
            showDetail(id) {
                this.invoiceId = id;

                $.ajax({
                    method: 'GET',
                    url: '/api/invoices/' + id
                }).done((response) => {
                    this.invoice = JSON.parse(response);
                    this.gridCustomItems = this.invoice.custom_invoice_items;
                 )};
            },
            addCustomItem(event){
                let grid = this.$refs.customItemGrid;
                console.log("AddCustomItem()");
                grid.items.push("Item");
            }
        },
        mounted: function () {
            let url = window.location.href.split("/");
            url.pop();
            this.invoiceId =url.pop();
            this.showDetail(this.invoiceId);
        },
        props:[

        ]
    }
</script>

Вид:

<grid :is-busy="gridIsBusy" :key="receipt.id" :fields="gridFields" :items="gridItems">
    <template slot="mass-buttons">
        <b-button @click.prevent="massDestroy">Odstranit vybrané</b-button>
        <b-button @click.prevent="massUnassign">Zrušit přiřazení pro vybrané</b-button>
    </template>
    <template slot="mass-checkbox-all">
        <b-form-checkbox @change="checkAll"></b-form-checkbox>
    </template>
    <template slot="action-buttons" slot-scope="data">
        <b-button v-b-tooltip.hover title="{{ __('Odstranit příjemku') }}" variant="danger" @click.prevent="deleteItem(data.data.item.id)"><i class="fa fa-times"></i></b-button>
        <b-button v-b-tooltip.hover title="{{ __('Zrušit přiřazení') }}" @click.prevent="unassignItem(data.data.item.id)"><i class="fa fa-ban"></i></b-button>
    </template>
</grid>

Результат:

введите описание изображения здесь

Мне нужно изменить первые три столбца всегда какввод с предопределенным текстом.