我一直在慢慢学习 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"
},
];
}
请您参考如下方法:
欢迎使用堆栈溢出!
您需要为具有链接的行实现自定义模板:
<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>
您可以在模板中放置按钮、图标或任何您想要的内容。希望这可以帮助!
