Question

我需要帮助将一些b表单元格重新格式化为输入。我试图获取每个输入的值并将其更改为值，但是不起作用。我发现了这一点：https://bootstrap-vue.js.org/docs/components/table/#formatter-callback，但我不知道该如何使用它。谢谢。

网格：

    <?php
    $servername = "localhost:3306";
    $username = "xxxxxxxx";
    $password = "xxxxxxxx";
    $dbname = "xxxxxxxx";

    try {
        $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
        // set the PDO error mode to exception
        $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

        // sql to delete a record
        $sql = "DELETE FROM Medicard WHERE id=id";

        // use exec() because no results are returned
        $conn->exec($sql);
        echo "Record deleted successfully";
        }
    catch(PDOException $e)
        {
        echo $sql . "<br>" . $e->getMessage();
        }

    $conn = null;
    ?>

EditComponent：

<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>

结果：

enter image description here

我总是需要像更改带有预定义文本的输入一样更改前三个列。

如何重新格式化b表单元格输入？

0 个答案: