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

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

VUE-001-在表格单元格（el-table-column）中添加超链接访问的更多相关文章

  1. Bootstrap：Bootstrap_table第一篇：快速用bootstrap_table（支持参数）筛选并展示数据，固定表格前几列，实现表格单元格编辑

    1.准备好css和js文件 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstr ...

  2. 关于.net Microsoft.Office.Interop.Word组建操作word的问题，如何控制word表格单元格内部段落的样式。

    控制word表格单元格内部文字样式.我要将数据导出到word当中,对于word表格一个单元格中的一段文字,要设置不同的样式,比如第一行文字作为标题要居中,加粗,第二行为正常的正文. 代码如下 publ ...

  3. JavaScript动态改变表格单元格内容的方法

    本文实例讲述了JavaScript动态改变表格单元格内容的方法.分享给大家供大家参考.具体如下: JavaScript动态改变表格单元格的内容,下面的代码通过修改单元格的innerHTML来修改单元格 ...

  4. 关于html表格单元格宽度的计算规则

    * { margin: 0; padding: 0 } body { background: #fafafa } ul,li { list-style: none } h1 { margin: 20p ...

  5. colgroup中col定义表格单元格宽度

    colgroup中可以使用col来定义表格单元格宽度,可以使用像素(数字),百分比,我们来具体看看有什么不同. 先看一个最基本的:用像素(数字)表示,因为table有个宽度,这里表示占比 <ht ...

  6. javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行

    jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...

  7. EXCEL表格单元格中包含数字英文和汉字，如何自动去掉汉字，保留英文和数字

    EXCEL表格单元格中包含数字英文和汉字,如何自动去掉汉字,保留英文和数字 Function 求数字和字母(对象 As String) '在文本与数字混杂中提取数字和字母   Dim myReg    ...

  8. VBA表格单元格替换文字

    Sub 表格单元格替换文字() If MsgBox("确定要替换单元格的文字吗?", vbYesNo + vbQuestion) = vbYes Then To ActiveDoc ...

  9. JQuery合并表格单元格

    转:http://www.cnblogs.com/xuguoming/p/3412124.html JQuery合并表格单元格   一.需求 如果存在一个表格,想把其中某一列内容相同的部分合并单元格, ...

随机推荐

  1. jQuery ajaxForm和 ajaxSubmit注意

    http://jquery.malsup.com/form/#file-upload 在使用jQuery异步上传时,需要注意在存在文件上传时,要将返回数据的contentType设置为text/htm ...

  2. python结合pyvmomi批量关闭vmware虚拟机

    #!/usr/bin/env python #参考https://github.com/vmware/pyvmomi/blob/master/sample/poweronvm.py "&qu ...

  3. 【原创】大数据基础之Spark（8）Spark中Join实现原理

    spark中join有两种,一种是RDD的join,一种是sql中的join,分别来看: 1 RDD join org.apache.spark.rdd.PairRDDFunctions /** * ...

  4. 【原创】大数据基础之Parquet（1）简介

    http://parquet.apache.org 层次结构: file -> row groups -> column chunks -> pages(data/index/dic ...

  5. js 禁止f12、Ctrl +S 、右键

    <script language=javascript> window.onload=function(){ document.onkeydown=function(){ ]; ){ re ...

  6. tp5分页后数据处理

  7. gerrit和git

    1.git Git是什么? Git是目前世界上最先进的分布式版本控制系统. SVN是集中式版本控制系统. Git与svn比较 相同:能记录文件的所有更改记录.这样是为了大量更改后,可以有记录回到过去, ...

  8. Mysql索引机制(B+Tree)

    1,索引谁实现的: 索引是搜索引擎去实现的,在建立表的时候都会指定,搜索引擎是一种插拔式的,根据自己的选择去决定使用哪一个. 2,索引的定义: 索引是为了加速对表中数据行的检索而创建的一种分散存储的( ...

  9. 论文阅读 | A Curriculum Domain Adaptation Approach to the Semantic Segmentation of Urban Scenes

    paper链接:https://arxiv.org/pdf/1812.09953.pdf code链接:https://github.com/YangZhang4065/AdaptationSeg 摘 ...

  10. 配置php5.6.4 + Apache2.4.10

    一.下载并安装apache 下载地址:www.apachelounge.com 解压后:执行以下命令: #httpd.exe –k install #httpd.exe -k start 在执行过程中 ...