vue-element內(nèi)table插入超鏈接a標(biāo)簽的使用
更新時(shí)間：2024年09月17日 10:03:28 作者：Sunny_Future
在Vue Element的table組件中插入超鏈接,可以使用<el-link>標(biāo)簽替代傳統(tǒng)的<a>標(biāo)簽,實(shí)現(xiàn)更加整潔的UI設(shè)計(jì),具體操作是替換原有的<span>標(biāo)簽,直接使用<el-link>進(jìn)行超鏈接的插入,使得鏈接樣式與Element UI保持一致
vue-element內(nèi)table插入超鏈接a標(biāo)簽用法
用法
- 可以去掉原<span>標(biāo)簽
- 使用<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">默認(rèn)鏈接</el-link> <el-link type="primary">主要鏈接</el-link> <el-link type="success">成功鏈接</el-link> <el-link type="warning">警告鏈接</el-link> <el-link type="danger">危險(xiǎn)鏈接</el-link> <el-link type="info">信息鏈接</el-link> </div>
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
初學(xué)vue出現(xiàn)空格警告的原因及其解決方案
今天小編就為大家分享一篇初學(xué)vue出現(xiàn)空格警告的原因及其解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
解決vue自定義指令導(dǎo)致的內(nèi)存泄漏問(wèn)題
這篇文章主要介紹了解決vue自定義指令導(dǎo)致的內(nèi)存泄漏問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
快速解決electron-builder打包時(shí)下載依賴慢的問(wèn)題
使用 Electron-builder 打包,有時(shí)會(huì)在下載Electron、nsis、winCodeSign的過(guò)程中 Timeout 導(dǎo)致打包失敗,本文給大家分享快速解決electron-builder打包時(shí)下載依賴慢的問(wèn)題,感興趣的朋友一起看看吧2024-02-02
VUE響應(yīng)式原理的實(shí)現(xiàn)詳解
這篇文章主要為大家詳細(xì)介紹了VUE響應(yīng)式原理的實(shí)現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
Vue項(xiàng)目中input框focus時(shí)不調(diào)出鍵盤(pán)問(wèn)題的解決
這篇文章主要介紹了Vue項(xiàng)目中input框focus時(shí)不調(diào)出鍵盤(pán)問(wèn)題的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue3.0 CLI - 2.4 - 新組件 Forms.vue 中學(xué)習(xí)表單
這篇文章主要介紹了vue3.0 CLI - 2.4 - 新組件 Forms.vue 中學(xué)習(xí)表單的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-09-09
vue-router 控制路由權(quán)限的實(shí)現(xiàn)
這篇文章主要介紹了vue-router 控制路由權(quán)限的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
在 Vue3 項(xiàng)目中，有時(shí)候會(huì)出現(xiàn)圖片視頻加載緩慢、首屏加載白屏的問(wèn)題，所以本文小編就給大家詳細(xì)介紹一下如何解決圖片視頻加載緩慢/首屏加載白屏的問(wèn)題,需要的朋友可以參考下2023-07-07
vue截圖轉(zhuǎn)base64轉(zhuǎn)文件File異步獲取方式
這篇文章主要介紹了vue截圖轉(zhuǎn)base64轉(zhuǎn)文件File異步獲取方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue項(xiàng)目中自動(dòng)導(dǎo)入svg并愉快的使用方式
這篇文章主要介紹了vue項(xiàng)目中自動(dòng)導(dǎo)入svg并愉快的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-11-11