Vue3：给表格的单元格增加超链接功能（点击单元格可以跳转到新的页面）

一、目的

在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>  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

2、代码解析

（1）在表格某一列中自定义模板

• 在表格要实现超链接的那一列，定义一个模板，其中 scope 是模板作用域对象，该模板用于渲染该列的单元格内容。

<template #default="scope">
1

（2）使用a标签来实现超链接

 <a :href="scope.row.courseUrl" target="_blank" style="text-decoration: none">
1

• 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18