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)文章
localStorage 和 sessionStorage 屬性允許在瀏覽器中存儲(chǔ) key/value 對(duì)的數(shù)據(jù),localStorage 用于長(zhǎng)久保存整個(gè)網(wǎng)站的數(shù)據(jù),保存的數(shù)據(jù)沒(méi)有過(guò)期時(shí)間,直到手動(dòng)去刪除,本文給大家介紹Vue3封裝localStorage-基本使用,感興趣的朋友一起看看吧2023-12-12
在Vue中如何使用$refs和ref屬性來(lái)操作DOM和組件實(shí)例,$refs是一個(gè)對(duì)象,包含由ref屬性注冊(cè)的DOM元素和組件實(shí)例,通過(guò)$refs可以在Vue中獲取DOM節(jié)點(diǎn)、組件實(shí)例、組件數(shù)據(jù)和屬性等2025-10-10
詳解Vue3中的watch偵聽(tīng)器和watchEffect高級(jí)偵聽(tīng)器
這篇文章主要介紹了Vue3中的watch偵聽(tīng)器和watchEffect高級(jí)偵聽(tīng)器,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
跳轉(zhuǎn)到指定URL,向history棧添加一個(gè)新的紀(jì)錄,點(diǎn)擊后退會(huì)返回至上一個(gè)頁(yè)面,這篇文章給大家介紹vue如何跳轉(zhuǎn)到其他頁(yè)面,包括無(wú)參跳轉(zhuǎn)和帶參跳轉(zhuǎn),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-10-10
Vue.js bootstrap前端實(shí)現(xiàn)分頁(yè)和排序
這篇文章主要為大家詳細(xì)介紹了Vue.js結(jié)合bootstrap前端實(shí)現(xiàn)分頁(yè)和排序效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
vue數(shù)據(jù)對(duì)象length屬性未定義問(wèn)題
這篇文章主要介紹了vue數(shù)據(jù)對(duì)象length屬性未定義問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vue分類(lèi)篩選filter方法簡(jiǎn)單實(shí)例
這篇文章主要介紹了vue分類(lèi)篩選filter方法的簡(jiǎn)單實(shí)例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
vue項(xiàng)目中應(yīng)用ueditor自定義上傳按鈕功能
這篇文章主要介紹了vue項(xiàng)目中應(yīng)用ueditor自定義上傳按鈕功能，文中以vue-cli生成的項(xiàng)目為例給大家介紹了vue項(xiàng)目中使用ueditor的方法，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-04-04
這篇文章主要介紹了深入理解vue中的$set,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
這篇文章主要給大家介紹了關(guān)于vue使用keep-alive后清除緩存的相關(guān)資料,這個(gè)問(wèn)題在我們?nèi)粘９ぷ髦薪?jīng)常會(huì)用到,本文通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-08-08