一、目的
在Vue3项目中，给表格某个字段下的全部单元格添加超链接功能，点击对应的单元格可以进入对应的页面
二、定义单元格内容
- 使用ElementPlus的el-table组件来实现表格
1、代码
<template>
<el-table :data="dataAll">
<!-- 要实现超链接的字段 -->
<el-table-column prop="name" label="选项1">
<template #default="scope">
<a :href="scope.row.courseUrl" target="_blank" style="text-decoration: none">
{{ scope.row.name }}
</a>
</template>
</el-table-column>
<!-- 其他列 -->
<el-table-column prop="key2" label="字段2" />
<el-table-column prop="key3" label="字段3" />
<el-table-column prop="key4" label="字段4" />
<el-table-column prop="key5" label="字段5" />
</el-table>
</template>
2、代码解析
（1）在表格某一列中自定义模板
- 在表格要实现超链接的那一列，定义一个模板，其中 scope 是模板作用域对象，该模板用于渲染该列的单元格内容。
<template #default="scope">
（2）使用a标签来实现超链接
<a :href="scope.row.courseUrl" target="_blank" style="text-decoration: none">
- href 属性：
用来设置链接地址，比如这里使用的是 scope.row.courseUrl，即当前行的 courseUrl 属性 - target=“_blank” 表示在新窗口打开链接，即点击超链接时，会重新打开一个页面，而不是在原先的页面上进行跳转，这样方便用户阅读
- style=“text-decoration: none” 表示去掉超链接自带的下划线，可根据个人需求进行选择（默认下划线不去掉）
（3）总结
该部分代码可以当作模板直接套用，根据实际情况改动下图对应位置即可：
三、触发提示功能
-
如果把超链接的下划线去掉了，可以增加触发提示功能，让用户知道点击单元格可以进入对应的网址，提高交互性
-
在前面代码的基础上，使用el-tooltip组件来实现触发功能
-
根据实际情况改动相应的位置即可：
-
当鼠标悬浮在对应的单元格时，都会有提示词提醒用户可以点击单元格实现页面的跳转，完整代码如下：
<el-table-column prop="name" label="项目名称" width="330">
<template #default="scope">
<el-tooltip
content="点击进入新页面"
placement="top-start"
effect="light"
>
<!-- <template #default="scope"> -->
<a
:href="scope.row.courseUrl"
style="text-decoration: none; color: white"
>
{{ scope.row.name }}
</a>
<!-- </template> -->
</el-tooltip>
</template>
</el-table-column>
