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

最新推荐文章于 2024-05-06 11:45:50 发布

lmr廖

最新推荐文章于 2024-05-06 11:45:50 发布

阅读量2.3k

点赞数 1

文章标签： vue.js 前端 elementui

本文链接：https://blog.csdn.net/lmrylll/article/details/131288703

版权

在前端网页开发中，特别是使用ElementUI库时，可以修改el-table-column的模板来实现单元格内显示超链接。通过在<templateslot-scope=scope>中添加<a>标签，并绑定row.url到href属性，可以创建一个点击后在新窗口打开的链接。这种方法使得列表数据中的链接更加直观易用。

摘要由CSDN通过智能技术生成

在进行前端网页开发时，通常列表数据我们使用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>

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