有没有办法访问 Primevue 数据表中的索引或数据值？

Question

我在 Primevue 中有一个数据表，我正在尝试访问数据表中的数据 html 以获取无法在插槽内完成的 v-if。在一个简单的 v-for 中，它可以像这样完成 v-for="(product, i) in products" 然后我要么使用索引 i 访问我的产品数组，要么我使用产品......有没有办法在<DataTable :value="products"> 标签？

Answer 1

PrimeVue 中似乎没有确定索引的方法DataTable.

例如，在 DataTable 中，您可以通过 slotProps 访问行数据。

    <Column field="name" header="Name">
        <template #body="slotProps">
            <div>
                {{slotProps.data.name}}
            </div>
        </template>
    </Column>

Answer 2

对于遇到此问题的任何人，可以通过组件上的函数访问数据，如下所示：

<DataTable v-model:expandedRows="expandedRows" :rowClass="showExpander"></Column>

在你的方法中：

showExpander(data) {
    return data.variants && data.variants.length ? '' : 'no-expander';
},

在你的Css中：

:deep(.no-expander .p-row-toggler) {
    opacity: 0;
    pointer-events: none;
}

Answer 3

{data} 属性应该可以让您访问行值。

试试这个：

            <Column header="headerName">
                <template #body="{data}">
                    {{ data.arrayProp[index].propName }}
                </template>
            </Column>

有没有办法访问 Primevue 数据表中的索引或数据值？

is there a way to access index or datable values in a Primevue datatable?

datatables

vue.js

primevue