VUE 中,在 el-table-column中添加超链接 与 跳转外链 的代码
在vue中进行前端网页开发时,通常列表数据用el-table展示。那么如何在 el-table-column 单元格中使用超链接
·
VUE 中,在 el-table-column中添加超链接 与 跳转外链 的代码
在vue中进行前端网页开发时,通常列表数据用el-table展示。那么如何在 el-table-column 单元格中使用超链接
呢?
1、在 el-table-column 单元格中使用超链接
解决代码如下:
<el-table-column
prop="links"
label="Links"
width="600px">
<template slot-scope="scope">
<a :href="scope.row.links" target="_blank" class="buttonText">{{scope.row.links}}</a>
</template>
</el-table-column>
#这里面的scope.row.links,这个links指的是前面<el-table-column 中的prop,不要指定错误
#添加超链接用的标签是<a></a>
2、在 指定的el-table-column 单元格中添加外链跳转
<el-table-column
prop="goid1"
label="GO_ID"
align="center">
<template slot-scope="scope">
<a target="_blank" style="color:#007bff;" v-if="scope.row.goid1!=null"
v-bind:href="'http://amigo.geneontology.org/amigo/search/ontology?q='+scope.row.goid1">
{{ scope.row.goid1 }}
</a>
<span v-else> {{ scope.row.goid1 }}</span>
</template>
</el-table-column>
更多推荐
已为社区贡献19条内容
所有评论(0)