ElementUI表格中添加表頭圖標(biāo)懸浮提示
本文主要介紹了ElementUI表格中添加表頭圖標(biāo)懸浮提示,分享給大家,具體如下:

<el-table-column
label="操作"
fixed="right"
:render-header="tableAction"
width="120">
<!--scope 即為 userList scope.row即為當(dāng)前行數(shù)據(jù) -->
<template slot-scope="scope">
<el-button @click="editCar(scope.row)" type="primary" icon="el-icon-edit" size="small" circle></el-button>
<el-button @click="delCar(scope.row.carId)" type="danger"
icon="el-icon-delete" circle size="small"></el-button>
</template>
</el-table-column>
//表格操作提示
tableAction() {
return this.$createElement('HelpHint', {
props: {
content: '編輯車輛 / 刪除車輛'
}
}, '操作');
},
切記導(dǎo)入
import HelpHint from ‘~/components/HelpHint/HelpHint.vue';
并在 components中引入
HelpHint.vue 組件內(nèi)容
<template>
<span>
<span style="margin-right: 8px"><slot></slot></span>
<el-tooltip :content="content" :placement="placement">
<i class="el-icon-question" style="cursor: pointer;"></i>
</el-tooltip>
</span>
</template>
<script>
export default {
name: 'HelpHint',
props: {
placement: {
default: 'top'
},
content: String,
},
data() {
return {}
},
}
</script>
到此這篇關(guān)于ElementUI表格中添加表頭圖標(biāo)懸浮提示的文章就介紹到這了,更多相關(guān)Element? 圖標(biāo)懸浮提示內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue中radio單選框如何實現(xiàn)取消選中狀態(tài)問題
這篇文章主要介紹了vue中radio單選框如何實現(xiàn)取消選中狀態(tài)問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-05-05
VSCode使React?Vue代碼調(diào)試變得更爽
這篇文章主要為大家介紹了VSCode使React?Vue代碼調(diào)試變得更爽的使用方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07
vue?實現(xiàn)列表跳轉(zhuǎn)至詳情且能添加至購物車功能
列表頁面顯示數(shù)據(jù),點擊跳轉(zhuǎn)到對應(yīng)的詳情頁,詳情頁可以添加并跳轉(zhuǎn)到購物車,購物車具有常見功能,這篇文章主要介紹了vue?實現(xiàn)列表跳轉(zhuǎn)至詳情且能添加至購物車,需要的朋友可以參考下2022-10-10
vuejs在解析時出現(xiàn)閃爍的原因及防止閃爍的方法
這篇文章主要介紹了vuejs在解析時出現(xiàn)閃爍的原因及防止閃爍的方法,本文介紹的非常詳細(xì),具有參考借鑒價值,感興趣的朋友一起看看吧2016-09-09
詳解vue 動態(tài)加載并注冊組件且通過 render動態(tài)創(chuàng)建該組件
這篇文章主要介紹了vue 動態(tài)加載并注冊組件且通過 render動態(tài)創(chuàng)建該組件,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05

