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

时间:2022-07-25
本文章向大家介绍VUE-001-在表格单元格（el-table-column）中添加超链接访问，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。

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

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

随机文章
Javascript知识点必读
最近更新