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

Posted 2023-02-22

【中文标题】在 v-data-table Vuetify 中添加超链接

【英文标题】：add hyperlink in v-data-table Vuetify

【发布时间】：2020-08-07 05:01:10

【问题描述】：

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

我有我的 v-data-table

 <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: "[phone]",
          email: "[e-mail]",
          website: "www.lorem.be",
          location: "Gent"
        ,
      ];
    

【参考方案1】：

欢迎来到 Stack Overflow！

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

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

您可以在模板中放置按钮、图标或任何您想要的东西。希望这会有所帮助！

【参考方案2】：

您可以使用item.<name> slot。例如，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