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

Question

PrimeVue 库默认不支持此功能。 Table 目前看起来像 this .

这是我的产品系列：

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>

docs 中有更多示例。

在你的 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，并使用您当前拥有的内容，我会查看原因不适合你。

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

How to add links to each table entry using PrimeVue's DataTable component?

vue.js

vuejs2

primevue