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标签就可以了跳转了


相关文章
|
编解码 前端开发
Element el-row el-col 布局组件详解
本文目录 1. 背景 2. 分栏布局 3. 分栏间隔 4. 分栏偏移 4. 对齐方式 5. 响应式布局 6. 小结
6850 0
Element el-row el-col 布局组件详解
Swagger问题:No mapping for GET /swagger-ui.html报错
Swagger问题:No mapping for GET /swagger-ui.html报错
1410 0
|
前端开发 easyexcel Java
Java+EasyExcel实现文件导入导出,导入导出如此简单
项目中需要Excel文件的导入与导出Excel并下载,例如,导入员工信息,导出员工信息,手动输入比较繁琐,所以本篇博文教大家如何在Java中导入Excel文件与导出Excel文件
14859 3
Java+EasyExcel实现文件导入导出,导入导出如此简单
|
移动开发 JavaScript HTML5
el-input限制输入整数等分析
本文介绍了在Vue中限制el-input只能输入整数的几种方式,包括设置type为number,使用inputmode属性,自定义指令,计算属性,使用onafterpaste和onkeyup事件以及使用el-input-number的precision属性。每种方式都有其优缺点,可以根据实际需求选择合适的方式。比较建议用自定义指令的方式来实现。
2170 0
el-input限制输入整数等分析
|
JavaScript 关系型数据库 Linux
|
JavaScript 前端开发 安全
解锁Vue3与TypeScript的完美搭档:getCurrentInstance带你高效打造未来前端
【8月更文挑战第21天】Vue3的getCurrentInstance方法作为Composition API的一部分,让开发者能在组件内访问实例。结合TypeScript,可通过定义组件实例类型实现更好的代码提示与类型检查,提升开发效率与代码质量。例如,定义一个带有特定属性(如myData)的组件实例类型,可以在setup中获取并安全地修改这些属性。这种方式确保了一致性和减少了运行时错误,使开发更加高效和安全。
415 0
|
JavaScript
Vue中router路由的使用、router-link的使用(在项目中的实际运用方式)
这篇文章介绍了Vue中router路由和router-link的使用方式,包括router配置、router-link在模板中的使用,以及实现的导航菜单和页面路由效果。
Vue中router路由的使用、router-link的使用(在项目中的实际运用方式)
|
前端开发
若依修改,配置了一个接口路径出现了,如何放通接口{ “msg“: “请求访问:/code/list,认证失败,无法访问系统资源“, “code“: 401}
若依修改,配置了一个接口路径出现了,如何放通接口{ “msg“: “请求访问:/code/list,认证失败,无法访问系统资源“, “code“: 401}
|
11月前
|
JavaScript 容器
vue-element-admin 综合开发二:搭建首页架子、侧边栏、修改默认样式、menu和路由跳转页面初体验
这篇文章详细介绍了如何使用Vue和Element UI搭建一个后台管理系统,包括首页布局、侧边栏、样式调整、菜单和路由配置,以及解决开发中遇到的问题。
971 1
vue-element-admin 综合开发二:搭建首页架子、侧边栏、修改默认样式、menu和路由跳转页面初体验
|
JavaScript
基于Vue3实现简约型侧边栏
本文介绍了如何在Vue3项目中实现一个简约型侧边栏导航,包括配置路由、页面布局和导航交互,以及如何通过Vue Router和条件渲染实现动态内容展示。
1265 1