可以通过自定义模板来实现。首先,需要在v-data-table的columns属性中定义一个自定义模板,然后在该模板中使用v-html指令来渲染超链接。
以下是一个示例代码:
<template>
<v-data-table
:headers="headers"
:items="items"
:items-per-page="5"
class="elevation-1"
>
<template v-slot:item.link="{ item }">
<a :href="item.link" target="_blank">{{ item.link }}</a>
</template>
</v-data-table>
</template>
<script>
export default {
data() {
return {
headers: [
{ text: 'Name', value: 'name' },
{ text: 'Link', value: 'link' },
],
items: [
{ name: 'Item 1', link: 'https://example.com' },
{ name: 'Item 2', link: 'https://example.com' },
{ name: 'Item 3', link: 'https://example.com' },
],
};
},
};
</script>
在上述代码中,我们使用了v-slot:item.link来定义了一个自定义模板,该模板会应用到每一行的link列上。在模板中,我们使用了v-html指令来渲染超链接,其中:href绑定了item.link作为超链接的地址,target="_blank"用于在新标签页中打开链接。
这样,v-data-table中的link列就会显示为超链接,并且点击该链接会在新标签页中打开。
推荐的腾讯云相关产品:腾讯云云服务器(CVM),腾讯云对象存储(COS)
腾讯云云服务器(CVM):提供弹性计算能力,支持多种操作系统,适用于各类应用场景。产品介绍链接:https://cloud.tencent.com/product/cvm
腾讯云对象存储(COS):提供安全、稳定、低成本的云端存储服务,适用于存储和处理各类非结构化数据。产品介绍链接:https://cloud.tencent.com/product/cos
云+社区技术沙龙[第27期]
云+社区技术沙龙[第19期]
taic
taic
Elastic 实战工作坊
Elastic 实战工作坊
腾讯云GAME-TECH沙龙
云+社区技术沙龙[第22期]
云+社区技术沙龙 [第30期]
云+社区技术沙龙[第23期]
云+社区技术沙龙[第29期]
云+社区技术沙龙[第14期]
领取专属 10元无门槛券
手把手带您无忧上云