vue-element內table插入超鏈接a標簽的使用
更新時間：2024年09月17日 10:03:28 作者：Sunny_Future
在Vue Element的table組件中插入超鏈接,可以使用<el-link>標簽替代傳統(tǒng)的<a>標簽,實現(xiàn)更加整潔的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 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>
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
localStorage 和 sessionStorage 屬性允許在瀏覽器中存儲 key/value 對的數(shù)據(jù),localStorage 用于長久保存整個網站的數(shù)據(jù),保存的數(shù)據(jù)沒有過期時間,直到手動去刪除,本文給大家介紹Vue3封裝localStorage-基本使用,感興趣的朋友一起看看吧2023-12-12
在Vue中如何使用$refs和ref屬性來操作DOM和組件實例,$refs是一個對象,包含由ref屬性注冊的DOM元素和組件實例,通過$refs可以在Vue中獲取DOM節(jié)點、組件實例、組件數(shù)據(jù)和屬性等2025-10-10
詳解Vue3中的watch偵聽器和watchEffect高級偵聽器
這篇文章主要介紹了Vue3中的watch偵聽器和watchEffect高級偵聽器,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
跳轉到指定URL,向history棧添加一個新的紀錄,點擊后退會返回至上一個頁面,這篇文章給大家介紹vue如何跳轉到其他頁面,包括無參跳轉和帶參跳轉,本文結合實例代碼給大家介紹的非常詳細,需要的朋友參考下吧2023-10-10
Vue.js bootstrap前端實現(xiàn)分頁和排序
這篇文章主要為大家詳細介紹了Vue.js結合bootstrap前端實現(xiàn)分頁和排序效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了vue數(shù)據(jù)對象length屬性未定義問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要介紹了vue分類篩選filter方法的簡單實例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了vue項目中應用ueditor自定義上傳按鈕功能，文中以vue-cli生成的項目為例給大家介紹了vue項目中使用ueditor的方法，感興趣的朋友跟隨腳本之家小編一起學習吧2018-04-04
這篇文章主要介紹了深入理解vue中的$set,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要給大家介紹了關于vue使用keep-alive后清除緩存的相關資料,這個問題在我們日常工作中經常會用到,本文通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-08-08