vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue-element内table插入超链接a标签

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

作者：Sunny_Future

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

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

用法

<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>

总结

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

您可能感兴趣的文章:
阅读全文