首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

可以通过自定义模板来实现。首先,需要在v-data-table的columns属性中定义一个自定义模板,然后在该模板中使用v-html指令来渲染超链接。

以下是一个示例代码:

代码语言:txt
复制
<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

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券