如何使用PrimeVue的DataTable组件为每个表条目添加链接？

Question

PrimeVue库默认情况下不支持此功能。该表当前如下所示。

这是我的一系列产品：

products: [
{brand: "Volkswagen", year: 2012, color: "Orange", vin: "dsad231ff", url: "linkToSite"},
{brand: "Audi", year: 2011, color: "Black", vin: "gwregre345", url: "linkToSite"},
{brand: "Renault", year: 2005, color: "Gray", "vin": "h354htr", url: "linkToSite"},
]

这是默认的PrimeVue DT列设置：

columns: [
{field: 'brand', header: 'Brand'},
{field: 'year', header: 'Year'},
{field: 'color', header: 'Color'},
{field: 'vin', header: 'Vin'}
]

这是我的模板代码：

<DataTable :value="products">
<Column v-for="col of columns" :field="col.field" :header="col.header" :key="col.field"></Column>
</DataTable>

Answer 1

使用<template #body="slotProps">自定义<Column>中单元格的外观。

<DataTable ...>
<Column field="brand" header="Brand">
<template #body="slotProps">
<a :href="slotProps.data.url" v-text="slotProps.data.brand" />
</template>
</Column>  
...
</DataTable>

文档中的更多示例。

在你的v-for内部(我还没有测试过，但它应该可以工作(：

<Column v-for="col of columns"
:field="col.field"
:header="col.header"
:key="col.field">
<template #body="slotProps" v-if="col.field === 'brand'">
<a :href="slotProps.data.url" v-text="slotProps.data.brand" />
</template>
</Column> 

如果由于某种原因，它不起作用，请使用codesandbox.io或类似的工具创建一个mcve，并使用您当前拥有的内容，我将研究它为什么不适用于您。