在 v-data-table Vuetify 中添加超链接

Question

我一直在慢慢学习 vue.js 和 Vuetify 的乐趣。我试图将电子邮件和网站作为工作链接，但就是不知道该怎么做。

我有我的 v 数据表

 <v-data-table :headers="headers" :items="companies" :search.sync="search" :items-per-page="5">

在我的脚本中，我首先拥有：

    data: () => ({
    headers: [
      { text: "Bedrijfsnaam", align: "start", value: "name" },
      { text: "Telefoon", value: "phone" },
      { text: "e-Mail", value: "email" },
      { text: "Website", value: "website" },
      { text: "Locatie", value: "location" },
      { text: "Actions", value: "actions", sortable: false }
    ],
    companies: [],
  }),

最后

  methods: {
    initialize() {
      this.companies = [
        {
          name: "Lorem NV",
          phone: "+32 1 234 56 78",
          email: "info@lorem.be",
          website: "www.lorem.be",
          location: "Gent"
        },
      ];
    }

Answer 1

欢迎使用堆栈溢出！

您需要为具有链接的行实现自定义模板：

<v-data-table
  :headers="headers"
  :items="companies"
  :search.sync="search"
  :items-per-page="5"
>
  <template #item.phone="{ item }">
    <a target="_blank" :href="`tel:${item.phone}`">
      {{ item.phone }}
    </a>
  </template>
  <template #item.email="{ item }">
    <a target="_blank" :href="`mailto:${item.email}`">
      {{ item.email }}
    </a>
  </template>
  <template #item.website="{ item }">
    <a target="_blank" :href="item.website">
      {{ item.website }}
    </a>
  </template>
</v-data-table>

您可以将任何内容放入<template>您想要的元素中，例如，如果您id为每个公司都有一个字段，并且您想将公司名称链接到您网站中包含该公司详细信息页面的页面，则您可以做：

<v-data-table
  :headers="headers"
  :items="companies"
  :search.sync="search"
  :items-per-page="5"
>
  <template #item.name="{ item }">
    <router-link :to="{ name: 'company', params: { id: item.id } }">
      {{ item.name }}
    </router-link>
  </template>
</v-data-table>

您可以在模板中放置按钮、图标或任何您想要的内容。希望这可以帮助！

Answer 2

您可以使用item.<name>插槽。例如，website属性名称在哪里：

    <template #item.website="{ value }">
        <a :href="value">
          {{ value }}
        </a>
    </template>

或email,

    <template #item.email="{ value }">
        <a :href="`mailto:${value}`">
          {{ value }}
        </a>
    </template>

这只需要用于您要自定义的字段。

演示：https : //codeply.com/p/CX3vXv6x6R