如何将超链接添加到我的 v-data-table 组件的应用程序列？

Question

数据 table 是从数据库加载的，我有 link 以及应用程序的名称。我不想显示 links，当我点击应用程序名称时，它应该打开匹配的 link.

    headers: [
      {
        text: 'Name',
        left: true,
        value: 'CustomerFullName',
      },
      { text: 'Application Name', value: 'ApplicationName' },
      { text: 'Country', value: 'CustomerCountryCode' },
      { text: 'Email Adress', value: 'CustomerEmailAddress' },
      { text: 'Status', value: 'NewStatus'},
      { text: 'CB Status', value: 'CBStatusID' },
      { text: 'Trial ending', value: 'FormattedTrialEndsAt' },
      { text: 'Next billing at', value: 'FormattedCBNextBillingAt'},
      { text: 'User Limit', value: 'UserLimit' },
      { text: 'QuickBooks', value: 'QBEnabled' },
      { text: 'Wizard', value: 'NewWizardStatus'}
    ],



    <td v-for="(header, index) in headers" :key="index"
        :class="[ index === 0? 'text-xs-left': 'text-xs-center', 'body-2', 'ma-0', 'pa-0', 'pl-2']" v-if="header.value!==''">
      {{renderData(props.item, header)}}
    </td>

Answer 1

<td v-for="(header, index) in headers" :key="index"
        :class="[ index === 0? 'text-xs-left': 'text-xs-center', 'body-2', 'ma-0', 'pa-0', 'pl-2']" v-if="header.value!==''">
<a :href="header.link">
      {{renderData(props.item, header)}}
</a>
    </td>

假设 header object 具有 link 属性。

Answer 2

您可以为特定的 header 名称（列名）传递模板标记。

<v-data-table
          :headers="headers"
          class="elevation-1">
  <template v-slot:item.data.dataName="{ item }">
    <a :href="'mydata/'+ item.data.dataId" target="_blank">
      {{ item.data.dataName }}
    </a>
  </template>
</v-data-table>

如何将超链接添加到我的 v-data-table 组件的应用程序列？

How can I add hyperlinks to my v-data-table component's Application column?

javascript

datatable

href

vue.js

vuetify.js