Vue3 中使用 Naive UI 表格组件添加超链接

在 Vue 3 中使用 Naive UI 的表格组件，并添加超链接可以通过以下步骤实现：

首先，确保已经安装了 Naive UI 和 Vue Router。可以通过以下命令进行安装：

npm install naive-ui vue-router

在 Vue 3 的入口文件（通常是 main.js）中导入并使用 Naive UI 和 Vue Router：

import { createApp } from 'vue'
import App from './App.vue'
import naive from 'naive-ui'
import router from './router'

const app = createApp(App)
app.use(naive)
app.use(router)
app.mount('#app')

在表格组件中，使用 Naive UI 的 Table 组件，并在需要添加超链接的列中使用 'render' 属性自定义渲染内容：

<template>
  <n-table :data='tableData' :columns='tableColumns'>
    <template #default='{ row }'>
      <n-table-cell>
        <a :href='`/detail/${row.id}`'>{{ row.name }}</a>
      </n-table-cell>
    </template>
  </n-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'Link 1' },
        { id: 2, name: 'Link 2' },
        { id: 3, name: 'Link 3' },
      ],
      tableColumns: [
        { key: 'name', title: 'Name', width: '200px' },
      ],
    }
  },
}
</script>

在上述代码中，我们使用 <template> 标签的 #default 插槽来自定义表格的渲染内容。在该插槽中，我们使用 Vue 的动态属性 :href 来设置超链接的目标地址，其中 row.id 是当前行的数据。

最后，在 Vue Router 中定义路由规则，以便在点击超链接时导航到相应的页面。假设我们的超链接目标地址为 /detail/:id，可以在 router/index.js 文件中添加以下路由规则：

import { createRouter, createWebHistory } from 'vue-router'
import Detail from '../views/Detail.vue'

const routes = [
  {
    path: '/detail/:id',
    name: 'Detail',
    component: Detail,
  },
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router

在上述代码中，我们定义了一个名为 Detail 的组件，并将其作为超链接的目标组件。

现在，当用户点击表格中的超链接时，将会导航到相应的页面，例如 /detail/1。根据定义的路由规则，会加载名为 Detail 的组件，可以在该组件中显示有关该链接的详细信息。