VUE-001-在表格单元格（el-table-column）中添加超链接访问

跟着阿笨一起玩NET

发布于 2020-09-27 14:37:12

4.9K00

代码可运行

文章被收录于专栏：跟着阿笨一起玩NET跟着阿笨一起玩NET

运行总次数：0

代码可运行

在进行前端网页开发时，通常列表数据我们使用table展示。那么如何在 el-table-column 单元格中使用超链接呢？

如下即是解决方式的一种：

仅需要将如下代码：

<el-table-column prop="url" label="访问链接" width="400" show-overflow-tooltip></el-table-column>

修改为如下代码即可：

<el-table-column label="访问链接" width="400" show-overflow-tooltip>
  <template slot-scope="scope">
    <a :href="scope.row.url" target="_blank" class="buttonText">{{scope.row.url}}</a>
  </template>
</el-table-column>

最终效果展示如下所示，点击超链接，即可在新窗口打开访问页面：

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-09-26 ，如有侵权请联系 cloudcommunity@tencent.com 删除

el

table

前端

数据

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度

VUE-001-在表格单元格（el-table-column）中添加超链接访问

VUE-001-在表格单元格（el-table-column）中添加超链接访问

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐