在进行前端网页开发时,通常列表数据我们使用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. 【原创】大叔问题定位分享(19)spark task在executors上分布不均

    最近提交一个spark应用之后发现执行非常慢,点开spark web ui之后发现卡在一个job的一个stage上,这个stage有100000个task,但是绝大部分task都分配到两个execut ...

  2. 快速搭建一个Spring Boot + MyBatis的开发框架

    前言:Spring Boot的自动化配置确实非常强大,为了方便大家把项目迁移到Spring Boot,特意总结了一下如何快速搭建一个Spring Boot + MyBatis的简易文档,下面是简单的步 ...

  3. @Transactional 无效原因

    在controller 上面使用  @Transactional 注解时候发现数据没有回滚,在执行完update 更新语句,事务直接就commit 了, 此时方法尚未执行结束,数据库数据已经更新了. ...

  4. 关于Failed to start component [StandardEngine[Catalina].StandardHost[localhost].StandardContext[/springmvc-demo-01-start]]出错的解决方法

    出错的详情: 严重: A child container failed during start java.util.concurrent.ExecutionException: org.apache ...

  5. Allegro PCB Design GXL (legacy) 设置自动保存brd文件

    Allegro PCB Design GXL (legacy) version 16.6-2015 菜单Setup > User Preferences... 在User Preferences ...

  6. 梯有N阶,上楼可以一步上一阶,也可以一步上二阶。编写一个程序,计算共有多少中不同的走法?

    c语言实现,小伙伴们谁要有更好的实现方法,要告诉我呦 #include int main(void) { int f,i,f1=1,f2=2; printf("请输入楼梯数"); ...

  7. Jmeter性能测试之关联(三)

    介绍下性能测试很重要的一个知识点---关联, 很多时候程序会在上一个请求随机生成一串字符串, 作为下一个请求的入参验证点, 其实就是动态的入参, 这个时候就需要用到关联, 常用的关联技术就是正则表达式 ...

  8. SQL Update

    转载至:https://www.liyongzhen.com/ UPDATE 语句 UPDATE语句用于修改表中的现有记录. UPDATE语法 1 2 3 UPDATE 表名 SET 字段1 = 值1 ...

  9. [iOS11] contentInsetAdjustmentBehavior 问题, push back时, 界面会上下移动.

    https://stackoverflow.com/questions/45573829/weird-uitableview-behaviour-in-ios11-cells-scroll-up-wi ...

  10. CSS3标准盒模型还是IE怪异模型box-sizing属性的应用设置

    在一个文档中,每个元素都被表示为一个矩形的盒子.盒子模型具有4个属性['外边距(margin)','边框(border)','内边距(padding)','内容(content)']. 我们要设置某个 ...