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>

总结

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

您可能感兴趣的文章:

uniapp一键打包H5的详细步骤
uniapp如何打包到H5并成功发布,以及在打包过程中会遇到的坑如何解决,本文将一一讲解,文中通过图文结合的方式给大家讲解的非常详细,具有一定的参考价值,需要的朋友可以参考下
2024-10-10
Vue后台中优雅书写状态标签的方法实例
在Vue中,我们可以非常便捷地通过标签实现状态的保存,这篇文章主要给大家介绍了关于Vue后台中如何优雅的书写状态标签的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2021-08-08
基于vue-upload-component封装一个图片上传组件的示例
这篇文章主要介绍了基于vue-upload-component封装一个图片上传组件的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10
Vue.js项目前端多语言方案的思路与实践
前端的国际化是一个比较常见的需求,但网上关于这一方面的直接可用的方案却不多,这篇文章主要给大家介绍了关于Vue.js项目前端多语言方案的思路与实践,需要的朋友可以参考下
2021-07-07
axios请求的一些常见操作实战指南
axios是一个轻量的HTTP客户端,它基于XMLHttpRequest服务来执行 HTTP请求,支持丰富的配置,支持Promise,支持浏览器端和 Node.js 端,下面这篇文章主要给大家介绍了关于axios请求的一些常见操作,需要的朋友可以参考下
2022-09-09
vue项目实现对某个区域绘制水印
这篇文章主要为大家详细介绍了vue项目实现对某个区域绘制水印，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
浅析vue 函数配置项watch及函数 $watch 源码分享
这篇文章主要介绍了vue 函数配置项watch及函数 $watch 源码分享 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-11-11
命令行CLI一键生成各种烦人的lint配置实例
这篇文章主要为大家介绍了命令行CLI一键生成各种烦人的lint配置实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
解决vue修改数据页面不重新渲染问题
这篇文章详细介绍了vue渲染机制和如何解决数据修改页面不刷新问题的多种方法，想了解更多的小伙伴可以借鉴阅读
2023-03-03
浅谈vue中document.getElementById()拿到的是原值的问题
这篇文章主要介绍了浅谈vue中document.getElementById()拿到的是原值的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07