Vue 3 Naive UI 表格组件显示超链接教程

要在 Vue 3 中使用 Naive UI 的表格 (Table) 组件来显示超链接，你可以按照以下步骤进行操作：

1. 首先，确保你已经安装了 Naive UI 和 Vue 3 的依赖：

npm install naive-ui vue@next

2. 在你的 Vue 组件中，导入所需的 Naive UI 组件和样式：

import { Table, Link } from 'naive-ui'
import 'naive-ui/lib/index.css' // 导入 Naive UI 样式

3. 在 Vue 组件的 `template` 中，使用 `Table` 组件来显示表格，并在表格中的某一列使用 `Link` 组件来显示超链接。例如，假设你有一个名为 `data` 的数组，包含了要显示在表格中的数据：

<template>
  <Table :data="data">
    <TableColumn label="名称" prop="name"></TableColumn>
    <TableColumn label="链接" prop="link">
      <template #default="{ row }">
        <Link :href="row.link" target="_blank">{{ row.link }}</Link>
      </template>
    </TableColumn>
  </Table>
</template>

在上面的代码中，我们使用 `TableColumn` 组件定义了两列，一列是名称 (name)，另一列是链接 (link)。在链接列中，我们使用 `Link` 组件来显示超链接，将链接的地址和显示文本都设置为 `row.link`。

4. 在 Vue 组件的 `script` 中，定义一个 `data` 属性，用于存储表格的数据。这里只是一个示例，你可以根据自己的需求来定义和获取数据：

<script>
export default {
  data() {
    return {
      data: [
        { name: '链接1', link: 'https://example.com/link1' },
        { name: '链接2', link: 'https://example.com/link2' },
        { name: '链接3', link: 'https://example.com/link3' },
      ]
    }
  }
}
</script>

现在你就可以在 Vue 3 中使用 Naive UI 的表格组件来显示超链接了。当你在浏览器中查看该组件时，链接列将显示为超链接，并且可以点击打开链接。