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>

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐