PrimeVUE - 数据表 - 添加在行编辑模式下打开的新记录

Question

我想在 PrimeVue 数据表中添加一条新记录，并且我希望该记录在编辑模式下连续打开。该文档仅通过对话框显示此功能。 https://www.primefaces.org/primevue/showcase-v2/#/datatable/crud

有什么方法可以让 openNew() 在编辑模式下添加一个空行，而不是使用 ProductDialog = true 吗？

<Toolbar class="p-mb-4">
    <template #left>
        <Button label="New" icon="pi pi-plus" class="p-button-success p-mr-2" @click="openNew" />
        <Button label="Delete" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected"
:disabled="!selectedProducts || !selectedProducts.length" />
    </template>
</Toolbar>  

...

methods: {
    openNew() {
        this.product = {};
        this.submitted = false;
        this.productDialog = true;
    },
´´´

Many Thanks.

Answer 1

我合并了添加新行和编辑现有行，并确保您一次只能编辑一行。

<template>

    <Button @click="addNewRow">Add new</Button>
    <DataTable
        :value="tableRows"
        v-model:editingRows="editingRows"
        edit-mode="row"
        @row-edit-init="onRowEditInit"
        @row-edit-save="onRowEditSave"
        data-key="id"
    ></DataTable>
</template>
<script lang="ts" setup>
    const existingRows = ref([]);
    const rowSelectedForEdit = ref();

    const editingRows = ref([]);

    const tableRows = computed(() => {
        // If a new row is currently toggled then add it to the end of the table
        if (rowSelectedForEdit.value?.id === 0 && editingRows.value.find((r) 
    => r.id === 0)) {
            return [...existingRows.value, rowSelectedForEdit.value];
        }
        return items;
    });

    const addNewRow = () => {
        rowSelectedForEdit.value = {
            id: 0, // for template data key (0 is not used in my setup for 
                existing items)
            // name,... other fields of the entity
        };
        editingRows.value = [editedBillingRow.value];
    }

    const onRowEditInit = (event) => {
        editingRows.value = [
            ...editingRows.value.filter((r) => r.id === event.data.id)
        ]; // Allow one edit at a time

        rowSelectedForEdit.value = JSON.parse(JSON.stringify(event.data));
        // use Lodash or other instead of JSON parse hack
    };

    const saveBillingRow = (event: any) => {
        if (rowSelectedForEdit.value.id === 0) { // create new }
        else {  // update };
    }
</script>