时间戳

首页 > 解决方案 > 如何向我的 v-data-table 组件的 Application 列添加超链接？

javascript - 如何向我的 v-data-table 组件的 Application 列添加超链接？

问题描述

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

    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>

标签： javascriptvue.jsdatatablehrefvuetify.js

解决方案

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

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

推荐阅读