在进行前端网页开发时,通常列表数据我们使用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. 【原创】大数据基础之Oozie(2)使用

    命令行 $ oozie help 1 导出环境变量 $ export OOZIE_URL=http://oozie_server:11000/oozie 否则都需要增加 -oozie 参数,比如 $ ...

  2. 清北-Day5-R2-divide

    题目描述 问是否可以将一个仅由0~9组成的字符串划分成两个或两个以上部分,使得每一部分的数字总和相等. 输入 输入文件名为 \(divide.in\) 多组数据,第一行一个数\(n\),表示数据组数 ...

  3. webpack4 搭建遇到的奇葩问题集合

    一.webpack4 打包es6 会报错 需要安装一下插件 https://blog.csdn.net/Beamon__/article/details/85048448二.webpack4 打包动态 ...

  4. yapi部署

    官方提供了两种安装方式,由于环境或者权限问题可能会遇到不少麻烦 最简单的安装方式: 第一种方式 npm install -g yapi-cli --registry https://registry. ...

  5. 饮冰三年-人工智能-Python-20 Python线程、进程、线程

    进程:最小的数据单元 线程:最小的执行单元 一: 1:线程1 import threading #线程 import time def Music(): print("Listen Musi ...

  6. 【转】win10哪个版本最好用,推荐win10企业版LTSC

    https://msdn.itellyou.cn/ win10企业版LTSC又被称为win10企业版2019长期服务版本,这个版本小编认为是目前最好用的win10版本,在win10企业版2016长期服 ...

  7. 【转载】ImportFbx Errors

    [转自http://blog.csdn.net/chenggong2dm/article/details/39580735] 问题: 在导入动作的时候出现一个错误: ImportFBX Errors: ...

  8. SQL反模式学习笔记7 多态关联

    目标:引用多个父表 反模式:使用多用途外键.这种设计也叫做多态关联,或者杂乱关联. 多态关联和EAV有着相似的特征:元数据对象的名字是存储在字符串中的. 在多态关联中,父表的名字是存储在Issue_T ...

  9. 即将上线的Imcash是何方神圣?

    区块链的诞生,让数字资产来到这个时代,每个人的财产分布又多了一种十分重要的选择. 当下每个人最需要的就是一款优秀的数字资产管理平台,目前市面上各种平台层出不穷,在线管理.离线管理.全节点钱包.轻钱包. ...

  10. [Python]sort与sorted高级技巧

    与其他语言不同,python 3.0之后,弃用了其他语言中常见的cmp方法,在sort方法中改用key实现. 之前一直疑惑自定义对象的排序如何写comparator,最后发现还是通过内部的__cmp_ ...