在进行前端网页开发时，通常列表数据我们使用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. STM32-cJSON库的打包和解析

    这几天使用了一下JSON在STM32103平台上的使用,还是很好用的,在此记录下. JSON是啥我也不总结了,就是直观的看起来是一个有格式的字符串,看起来非常清楚明白,有点像Python中的dicit ...

  2. linux 乌班图 xshell链接不上服务器

    输入  ps -e |grep ssh ,如果没有任何反应则是没有安装 命令 sudo apt-get install openssh-server 然后出现是否同意-Y,同意进行自动下载 如果提示  ...

  3. mysql只删除表不删除库

    1.备份数据库mysqldump -uroot -P13306 -h10.1.50.14 -p 库名 > /opt/20190109.sql2.删除所有表mysql -uroot -P13306 ...

  4. switch case 遇到判断type分支的写法

    一叶障目,没有接触到的知识点真是太多了...... 最近项目里需要用到一个小工具,就用winform写了一个出来,然后需要一个功能就是清空控件内容,我这个工具就用到了textbox和combobox, ...

  5. vue路由懒加载

    大项目中,为了提高初始化页面的效率,路由一般使用懒加载模式,一共三种实现方式.(1)第一种写法: component: (resolve) => require(['@/components/O ...

  6. 动态加载机Servlet容器加载器

    动态加载是Servlet 3.0中的新特性,它可以实现在 不重启Web应用的情况下加载新的Web对象(Servlet. Filter.Listener).Servlet容器加载器也是Servlet 3 ...

  7. Razor---服务器端标记语言

    Razor 是一种允许您向网页中嵌入基于服务器的代码(Visual Basic 和 C#)的标记语法<ul> @for (int i = 0; i < 10; i++) { < ...

  8. python计算文件的行数的方法

    1.简单方法把文件读入一个大的列表中,然后统计列表的长度.   count = len(open("文件名").readlines()) print count 2.读取文件某一行 ...

  9. cmd下，regsvr32不是内部或外部命令

    https://jingyan.baidu.com/article/48b37f8d2fb1aa1a646488cc.html

  10. Maven mvn install 本地jar添加到本地maven仓库中

    mvn install:install-file -DgroupId=alipay -DartifactId=taobao-sdk-java-auto -Dversion=1.0 -Dpackagin ...