vue-element内table插入超链接a标签的使用

更新时间：2024年09月17日 10:03:28 作者：Sunny_Future

在Vue Element的table组件中插入超链接,可以使用<el-link>标签替代传统的<a>标签,实现更加整洁的UI设计,具体操作是替换原有的<span>标签,直接使用<el-link>进行超链接的插入,使得链接样式与Element UI保持一致

vue-element内table插入超链接a标签用法

用法

可以去掉原<span>标签
使用<el-link>即可

<el-table-column :label="$t('es.cloud_url')" min-width="15px" align="center">
   <template slot-scope="{row}">
       <el-link :href="row.cloud_url" rel="external nofollow"  target="_blank" class="buttonText"  type="primary" :underline="false">详情</el-link>
   </template>
</el-table-column>

element-ui 文档地址

https://element.eleme.cn/#/zh-CN/component/link

<div>
  <el-link href="https://element.eleme.io" rel="external nofollow"  target="_blank">默认链接</el-link>
  <el-link type="primary">主要链接</el-link>
  <el-link type="success">成功链接</el-link>
  <el-link type="warning">警告链接</el-link>
  <el-link type="danger">危险链接</el-link>
  <el-link type="info">信息链接</el-link>
</div>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue3封装localStorage基本使用示例详解
localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据,localStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去删除,本文给大家介绍Vue3封装localStorage-基本使用,感兴趣的朋友一起看看吧
2023-12-12
VUE2语法中$refs和ref属性的使用方式
在Vue中如何使用$refs和ref属性来操作DOM和组件实例,$refs是一个对象,包含由ref属性注册的DOM元素和组件实例,通过$refs可以在Vue中获取DOM节点、组件实例、组件数据和属性等
2025-10-10
详解Vue3中的watch侦听器和watchEffect高级侦听器
这篇文章主要介绍了Vue3中的watch侦听器和watchEffect高级侦听器,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-08-08
vue如何跳转到其他页面
跳转到指定URL,向history栈添加一个新的纪录,点击后退会返回至上一个页面,这篇文章给大家介绍vue如何跳转到其他页面,包括无参跳转和带参跳转,本文结合实例代码给大家介绍的非常详细,需要的朋友参考下吧
2023-10-10
Vue.js bootstrap前端实现分页和排序
这篇文章主要为大家详细介绍了Vue.js结合bootstrap前端实现分页和排序效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
vue数据对象length属性未定义问题
这篇文章主要介绍了vue数据对象length属性未定义问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
vue分类筛选filter方法简单实例
这篇文章主要介绍了vue分类筛选filter方法的简单实例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
vue项目中应用ueditor自定义上传按钮功能
这篇文章主要介绍了vue项目中应用ueditor自定义上传按钮功能，文中以vue-cli生成的项目为例给大家介绍了vue项目中使用ueditor的方法，感兴趣的朋友跟随脚本之家小编一起学习吧
2018-04-04
深入理解vue中的$set
这篇文章主要介绍了深入理解vue中的$set,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-06-06
vue使用keep-alive后清除缓存的方法
这篇文章主要给大家介绍了关于vue使用keep-alive后清除缓存的相关资料,这个问题在我们日常工作中经常会用到,本文通过示例代码介绍的非常详细,需要的朋友可以参考下
2021-08-08