VUE 中，在 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>