时间戳

首页 > 解决方案 > 如何使用 PrimeVue 的 DataTable 组件为每个表条目添加链接？

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

问题描述

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>

标签： vue.jsvuejs2primevue

解决方案

使用 a<template #body="slotProps">自定义 a 中单元格的外观<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>

如果由于某种原因它不起作用，请使用您当前拥有的代码和box.io 或类似的东西创建一个mcve，我会看看为什么它不适合您。

推荐阅读