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>

Answer 2

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

假设标题对象具有链接属性。

如何在我的v-data-table组件的“应用程序”列中添加超链接？

2 个答案: