vue-element內(nèi)table插入超鏈接a標簽的使用

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

在Vue Element的table組件中插入超鏈接,可以使用<el-link>標簽替代傳統(tǒng)的<a>標簽,實現(xiàn)更加整潔的UI設(shè)計,具體操作是替換原有的<span>標簽,直接使用<el-link>進行超鏈接的插入,使得鏈接樣式與Element UI保持一致

vue-element內(nèi)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  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>

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

初學vue出現(xiàn)空格警告的原因及其解決方案
今天小編就為大家分享一篇初學vue出現(xiàn)空格警告的原因及其解決方案，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-10-10
解決vue自定義指令導致的內(nèi)存泄漏問題
這篇文章主要介紹了解決vue自定義指令導致的內(nèi)存泄漏問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
快速解決electron-builder打包時下載依賴慢的問題
使用 Electron-builder 打包,有時會在下載Electron、nsis、winCodeSign的過程中 Timeout 導致打包失敗,本文給大家分享快速解決electron-builder打包時下載依賴慢的問題,感興趣的朋友一起看看吧
2024-02-02
VUE響應式原理的實現(xiàn)詳解
這篇文章主要為大家詳細介紹了VUE響應式原理的實現(xiàn)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-03-03
Vue項目中input框focus時不調(diào)出鍵盤問題的解決
這篇文章主要介紹了Vue項目中input框focus時不調(diào)出鍵盤問題的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue3.0 CLI - 2.4 - 新組件 Forms.vue 中學習表單
這篇文章主要介紹了vue3.0 CLI - 2.4 - 新組件 Forms.vue 中學習表單的相關(guān)知識，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下
2018-09-09
vue-router 控制路由權(quán)限的實現(xiàn)
這篇文章主要介紹了vue-router 控制路由權(quán)限的實現(xiàn),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-09-09
VUE解決圖片視頻加載緩慢/首屏加載白屏的問題
在 Vue3 項目中，有時候會出現(xiàn)圖片視頻加載緩慢、首屏加載白屏的問題，所以本文小編就給大家詳細介紹一下如何解決圖片視頻加載緩慢/首屏加載白屏的問題,需要的朋友可以參考下
2023-07-07
vue截圖轉(zhuǎn)base64轉(zhuǎn)文件File異步獲取方式
這篇文章主要介紹了vue截圖轉(zhuǎn)base64轉(zhuǎn)文件File異步獲取方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue項目中自動導入svg并愉快的使用方式
這篇文章主要介紹了vue項目中自動導入svg并愉快的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-11-11