在进行前端网页开发时,通常列表数据我们使用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. gitlab+PHP 自动部署设计方案

    2018-9-26 14:00:39 星期三 场景: 由于某种情况, 不能使用Jenkins, so......只有自己实现了 看图: webUI 设计方案, - 文件夹A, 用来存放git分支- 文 ...

  2. 使用 ThreeSixty 创建可拖动的 360 度全景图片预览效果

    ThreeSixty 是生成可拖动的360度预览图像序列的 jQuery 插件.只需要在你的 HTML 页面包引入最新的 jQuery 和 threesixty.js 文件就可以使用了,支持键盘上的箭 ...

  3. 【python】flask+nginx配置

    背景信息 有wordpress服务A 有flask服务B, gunicorn启动,8个进程 用nginx代理,实现访问A然后跳转到B 问题 flask服务B上有文件上传操作,用nginx后发现无法上传 ...

  4. cf1153D 树形dp+思维

    一千八的题也不会做了呜呜呜 size[u]表示结点u下的叶子结点, 思维:可以想到一个子树对其父亲会有一个消耗值 考虑一个点如果是max,那么其最大值可以是size[u]-p,p是消耗值最小的子树 一 ...

  5. oracle导入.dmp文件

    在日常开发中,经常需要往一个数据库里导入.dmp文件,下面简单介绍下如何通过命令导入 1.创建一个awsbpm用户create user 用户名 identified by 密码; 如:create ...

  6. python之基于libsvm识别数字验证码

    1. 参考 字符型图片验证码识别完整过程及Python实现 2.图片预处理和手动分类 (1)分析图片 from PIL import Image img = Image.open('nums/ttt. ...

  7. matplotlib坐标轴设置-【老鱼学matplotlib】

    我们可以对坐标轴进行设置,设置坐标轴的范围,设置坐标轴上的文字描述等. 基本用法 例如: import numpy as np import pandas as pd import matplotli ...

  8. 在XPS13 上安装Ubuntu 16.04

    1 准备系统安装U盘 使用常见的光盘工具软件ultraISO. (1)首先使用UltraISO打开Ubuntu-16.04.4-desktop-amd64.iso安装映像. (2)在菜单栏中,选择&q ...

  9. IntelliJ IDEA 中 Web项目 目录结构

    --src     应用程序源代码和测试程序代码的根目录 --main --java 应用程序源代码目录 --resources 应用程序用到的资源文件(一般都是配置文件) --webapp web项 ...

  10. contos最小包安装完后一些准备

    yum upgradeyum install net-toolsyum -y install wgetyum -y install vim-enhanced yum install gcc gcc-c ...