VUE-001-在表格单元格(el-table-column)中添加超链接访问

时间:2022-04-06 10:34:32

在进行前端网页开发时,通常列表数据我们使用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)中添加超链接访问

VUE-001-在表格单元格(el-table-column)中添加超链接访问的更多相关文章

  1. Bootstrap:Bootstrap&lowbar;table第一篇:快速用bootstrap&lowbar;table(支持参数)筛选并展示数据,固定表格前几列,实现表格单元格编辑

    1.准备好css和js文件 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstr ...

  2. 关于&period;net Microsoft&period;Office&period;Interop&period;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&quot ...

  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. 更换SAP主界面右边区域背景主题

    1)  Tcode:SMW0(注意,最后面是零,不是英文字母O),选择第二个单选按钮 2)点击回车后,直接点击运行按钮. 3)在SAP WEB 资源库:对象显示 页面,点击:新建 4)创建对象名称,名 ...

  2. 使用dotTrace6&period;0进行内存分析

    dotTrace6.0提供了内存分析功能,统计抓取的时间段内各个堆栈执行过程中使用的内存大小,按照堆栈执行情况树状排序:和它之前提供的时间统计类似,粗截了几个页面,希望对大家有所帮助. 下载安装Jet ...

  3. &lbrack;JS代码&rsqb;如何判断ipad或者iphone是否为横屏或者竖屏 - portrait或者landscape

    //判断横屏或者竖屏 function orient() { //alert('gete'); if (window.orientation == 0 || window.orientation == ...

  4. Docker基本命令

    1.搜索Docker镜像 docker search <镜像名> 2.获取镜像 docker pull <镜像名> 3.查看本地镜像 docker images 4.删除镜像 ...

  5. angularjs学习总结&lpar;快速预览版&rpar;

    对html标签的增强 -> 指令 指令的本质是什么 声明的方式调用相应的脚本,实现一些操作,声明的所在的dom就是脚本的执行上下文? 自定义标签 -- 标签指令自定义属性 -- 属性指令特定格式 ...

  6. Java对象的强、软、弱和虚引用原理&plus;结合ReferenceQueue对象构造Java对象的高速缓存器

    //转 http://blog.csdn.net/lyfi01/article/details/6415726 1.Java对象的强.软.弱和虚引用 在JDK 1.2以前的版本中,若一个对象不被任何变 ...

  7. Codeforces Round &num;408 &lpar;Div&period; 2&rpar;

    C. Bank Hacking 题目大意:给出一棵n个节点的树,每个节点有一个权值,删掉一个点的代价为当前这个点的权值,并且会使其相邻点和距离为2且中间隔着未被删除的点的点权值加1,现在选一个点开始删 ...

  8. Linux系统网络编程中TCP通讯socket--send导致进程被关闭

    https://blog.csdn.net/dsanmux/article/details/52083403 https://blog.csdn.net/u011425939/article/deta ...

  9. 【Linux】Linux系统硬链接和软链接

    在linux系统中有种文件是链接文件,可以为解决文件的共享使用.链接的方式可以分为两种,一种是硬链接(Hard Link),另一种是软链接或者也称为符号链接(Symbolic Link). 查看lin ...

  10. 使用aspectJ实现Spring AOP的两种方式

    方式一:基于aspectJ的XML配置 方式二:基于aspectJ的注解方式 基于aspectJ的XML配置 1)       引入相关jar包 2)       创建Spring核心配置文件,必须导 ...