ElementPlus的el-table-column如何添加超链接的代码

简介: ElementPlus的el-table-column如何添加超链接的代码

原文链接:

VUE 中,在 el-table-column中添加超链接 与 跳转外链 的代码_el-table-column 链接-CSDN博客

有的时候,可能会遇到想要在el-table-column添加link标签的需求,比如这里我写了一个链接,想要直接点击链接,找到相关网站

自己ElementPlus的代码,如何添加link标签呢?

<el-table-column label="网站链接" prop="link"></el-table-column>

将代码写成这样就可以了,三个注意点,href对应的路径,要跟prop相同:

        <el-table-column label="网站链接" prop="link">
            <template v-slot="scope">
                <a :href="scope.row.link" target="_blank" class="buttonText" style="text-decoration: none;color:#409eff">{{scope.row.link}}</a>
            </template>
        </el-table-column>

此时link标签就可以了跳转了


相关文章
|
JavaScript 前端开发 数据安全/隐私保护
vue2+elementui上传照片(el-upload 超简单)
【6月更文挑战第4天】element上传附件(el-upload 超详细) 这个功能其实比较常见的功能,后台管理系统基本上都有,这就离不开element的el-upload 展示:
2185 0
|
JavaScript 算法 前端开发
vue + echarts实现国省市三级下钻联动
vue + echarts实现国省市三级下钻联动
1079 0
|
Cloud Native Nacos 数据库
2024年最新版Nacos安装教程(史上最详细保姆级教程)
2024年最新版Nacos安装教程(史上最详细保姆级教程)
6212 3
|
存储 算法 安全
国密算法及简单使用
国密算法,即国家密码局认定的国产密码算法,主要用于保护国家关键信息基础设施和商业领域的加密通信和数据安全。根据 2019年10月26日第十三届全国人民代表大会常务委员会第十四次会议通过的《中华人民共和国密码法》,国家对密码实行分类管理,密码分为核心密码、普通密码和商用密码
2672 4
|
编解码 前端开发
Element el-row el-col 布局组件详解
本文目录 1. 背景 2. 分栏布局 3. 分栏间隔 4. 分栏偏移 4. 对齐方式 5. 响应式布局 6. 小结
7849 0
Element el-row el-col 布局组件详解
|
JavaScript
如何对ElementUI、ElementPlus中的Tree树组件进行美化,如增加辅助线、替换展开收起图标、点击节点后文字高亮等效果?本文给你答案!
本文介绍了如何对ElementUI和ElementPlus的Tree树组件进行美化,包括增加辅助线、替换展开收起图标、点击节点后文字高亮等效果,并提供了详细的代码示例和实现效果。
4854 0
如何对ElementUI、ElementPlus中的Tree树组件进行美化,如增加辅助线、替换展开收起图标、点击节点后文字高亮等效果?本文给你答案!
|
前端开发 数据库
芋道框架审批流如何实现(Cloud+Vue3)
芋道框架审批流如何实现(Cloud+Vue3)
2479 4
|
前端开发
成功解决:如何使element中输入框颜色改变,以及如何解决使用/deep/ 出现警告信息问题
这篇文章讲述了如何在Element UI中改变输入框的背景颜色,以及如何解决使用深度选择器`/deep/`时出现的警告信息问题。文章提供了使用深度选择器修改背景颜色的CSS代码示例,展示了修改效果,并解释了如何通过在`/deep/`前加`div`或使用`::v-deep`来解决出现的红色波浪线警告问题。
成功解决:如何使element中输入框颜色改变,以及如何解决使用/deep/ 出现警告信息问题
|
Java 数据库连接 mybatis
成功解决: Invalid bound statement (not found) 在已经使用mybatis的项目里引入mybatis-plus,结果不能共存的解决
这篇文章讨论了在已使用MyBatis的项目中引入MyBatis-Plus后出现的"Invalid bound statement (not found)"错误,并提供了解决方法,主要是通过修改yml配置文件来解决MyBatis和MyBatis-Plus共存时的冲突问题。
成功解决: Invalid bound statement (not found) 在已经使用mybatis的项目里引入mybatis-plus,结果不能共存的解决
|
存储 JavaScript 前端开发
Vue中实现图片上传,上传后的图片回显,存储图片到服务器 【使用对象存储OSS】
这篇文章介绍了在Vue中实现图片上传到阿里云OSS对象存储服务的完整流程,包括服务端签名直传的前提知识、后端设置、前端组件封装以及图片上传和回显的效果展示。