在进行前端网页开发时，通常列表数据我们使用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. jenkins中slave节点连接的两种常用方式

    我们在使用jenkins的时候,一般来说肯定是有slave节点的,本来网上也有好多关于jenkins节点配置的教程,我也就不写了.简单说明一下:任务一般是在slave上面运行的.当然不是讲master ...

  2. EHCache：Eelment刷新后，timeToLiveSeconds失效了？

    个人以为只要设定了timeToLiveSeconds,中间过程不管有没有访问,只要LiveSeconds时间到了,缓存就会失效.但是开发时发现并非如此,经过一番折腾,最终发现自己的理解是正确的,还是使 ...

  3. 新增项目到GIT仓库中

    在本地新建项目的目录中打开Git Bash命令行工具 运行以下命令,设置全局信息(包括用户名,邮箱地址) git config --global user.name "你的姓名" ...

  4. django中静态文件的配置路径

    一  先找到配置文件 二  将配置文件添加上(注意名字一定要大写)

  5. 数据表为null的字段添加默认值

    UPDATE im_clusters SET `location`='深圳会展中心' WHERE `location` is NULL

  6. Nhibernate 使用 （一）

    一:介绍 NHibernate 是一个基于.Net 的针对关系型数据库的对象持久化类库.Nhibernate 来源于非常优秀的基于Java的Hibernate 关系型持久化工具.NHibernate ...

  7. ansible的delegate_to、connection、和local_action

    由于工作需要,经常需要把目标节点获得的信息写入执行节点文件日志. 所以经常用到delegate_to和connection,而local_action写法难看,基本不用. delegate_to和co ...

  8. python开发环境搭建及numpy基本属性-【老鱼学numpy】

    目的 本节我们将介绍如何搭建python的开发环境以及numpy的基本属性,这样可以检验我们的numpy是否安装正确了. python开发环境的搭建 工欲善其事必先利其器,我用得比较顺手的是Intel ...

  9. 初学Python的一些细节

    一.python的数据类型 1.python的基本数据类型包括数值数据类型和字符串数据类型:基本数据类型的特点是不允许改变,如果改变基本数据类型的值,会导致内存的重新分配. int 整形 二进制    ...

  10. 【自动化测试】使用Java+selenium填写验证码成功登录

    这是我第一次发博客,若有问题,请多多指教! 本次是为了帮忙解决,如果在平时自动化遇到有验证码填写的情况,我们如何成功登录情况. 思路: 首先我们先将验证码复制并保存成一个图片,然后使用tesserac ...