在进行前端网页开发时,通常列表数据我们使用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. iOS UIPrintInteractionController在iPad的 iOS10 和 11上的奇怪bug

    今天在弹出UIPrintInteractionController的时候,在ios10 和11的ipad 上测试,发现一直是protrait 方向弹出,结果就出现如下图的bug: 研究了好长时间,发现 ...

  2. nginx+iis使用

    一.nginx的介绍 nginx是由俄罗斯人开发的一款高性能的http和反向代理服务器,也可以用来作为邮件代理.相比较于其他的服务器,具有占用内存少,稳定性高等优势 Nginx相关地址 源码:http ...

  3. JS 对Array集合排序的方法

    我的业务是根据距离的远近经行一个排序: 第一种方法:冒泡排序 排序前的数据是这样子的: 排序后是这样子的: 代码可以直接复制使用的: <!doctype html> <html> ...

  4. KNN与K-Means的区别

    KNN(K-Nearest Neighbor)介绍 Wikipedia上的 KNN词条 中有一个比较经典的图如下: KNN的算法过程是是这样的: 从上图中我们可以看到,图中的数据集是良好的数据,即都打 ...

  5. redis-list操作

    List操作,redis中的List在在内存中按照一个name对应一个List来存储.如图: lpush(name,values) # 在name对应的list中添加元素,每个新的元素都添加到列表的最 ...

  6. CAS tomcat6搭建

    #genkey:在tomcat根目录下keytool -genkey -alias tomcat_cas -keyalg RSA -storepass changeit -keystore serve ...

  7. Classification

    kNN1 # -*- coding: utf-8 -*- """ kNN : 최근접 이웃 """ import numpy as np # ...

  8. Aragorn's Story HDU - 3966 -树剖模板

    HDU - 3966 思路 :树链剖分就是可以把一个路径上的点映射成几段连续的区间上.这样对于连续的区间可以用线段树维护, 对于每一段连续的区间都可以通过top [ ]数组很快的找到这段连续区间的头. ...

  9. Elasticsearch学习笔记三

    PS:前面两章已经介绍了ES的基础及REST API,本文主要介绍ES常用的插件安装及使用. Elasticsearch-Head Head是一个用于管理Elasticsearch的web前端插件,该 ...

  10. 2017-2018 ACM-ICPC, Central Europe Regional Contest (CERC 17)

    A. Assignment Algorithm 按题意模拟即可. #include<stdio.h> #include<iostream> #include<string ...