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

Question

数据表是从数据库加载的，我有那里的链接，以及应用程序的名称。我不想显示链接，只是当我单击应用程序名称时，它应该打开匹配的链接。

    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

您可以为特定的标题名称(列名)传递模板标签。

<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>