vue實(shí)現(xiàn)element表格里表頭信息提示功能(推薦)
更新時(shí)間：2019年11月20日 14:25:27 作者：凱小默
小編最近接了這樣一個(gè)需求，需要在element表格操作一欄添加提示功能，下面小編給大家?guī)?lái)了基于vue實(shí)現(xiàn)element表格里表頭信息提示功能，需要的朋友參考下吧
如圖：在element表格操作一欄需要添加提示功能
實(shí)現(xiàn)效果
如圖：鼠標(biāo)浮上去彈出tips
解決方案
1、編寫組件
在 promptMessage.vue 文件里面實(shí)現(xiàn)
<template>
<!-- 處理element表格表頭文字提示特別添加全局注冊(cè)組件 -->
<div class="promt-message-tooltip">
<el-tooltip effect="light" placement="left">
<div slot="content">
<p v-for="item in messages" :key="item">
{{item}}
</p>
</div>
<i class="el-icon-question" class="tips-icon"></i>
</el-tooltip>
</div>
</template>
<script>
export default {
props: ['messages']
}
</script>
<style lang="scss">
.promt-message-tooltip {
.tips-icon {
color:#409eff;
margin-left:5px;
font-size:14px;
}
}
</style>
2、開發(fā)插件
在 index.js 文件里面實(shí)現(xiàn)
import promptMessage from './promptMessage.vue'
export default {
install: (Vue) => {
Vue.component('promptMessage', promptMessage)
}
}
3、使用插件
在 main.js 文件里面實(shí)現(xiàn)
import promptMessage from '@/components/promptMessage/index.js' Vue.use(promptMessage)
4、業(yè)務(wù)代碼實(shí)現(xiàn)
<template>
<el-table tooltip-effect="light" :data="dataList" border >
<el-table-column label="操作" :render-header="renderHeader">
<template slot-scope="scope">刪除</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
methods: {
// render 事件
renderHeader (h, { column }) {
return h(
'div', {
style: 'display:flex;margin:auto;'
},
[
h('span', column.label),
// 直接用組件就完事了
h('prompt-message', {
props: { messages: ['kaimo需要的tips！'] }
})
]
)
}
}
}
</script>
總結(jié)
以上所述是小編給大家介紹的vue實(shí)現(xiàn)element表格里表頭信息提示功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
vue移動(dòng)端html5頁(yè)面根據(jù)屏幕適配的四種解決方法
在vue移動(dòng)端h5頁(yè)面當(dāng)中，其中適配是經(jīng)常會(huì)遇到的問(wèn)題，這塊主要有四個(gè)方法可以適用。這篇文章主要介紹了vue移動(dòng)端h5頁(yè)面根據(jù)屏幕適配的四種方案 ,需要的朋友可以參考下2018-10-10
vue 導(dǎo)航內(nèi)容設(shè)置選中狀態(tài)樣式的例子
今天小編就為大家分享一篇vue 導(dǎo)航內(nèi)容設(shè)置選中狀態(tài)樣式的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
單元測(cè)試是軟件開發(fā)非常基礎(chǔ)的一部分。單元測(cè)試會(huì)封閉執(zhí)行最小化單元的代碼，使得添加新功能和追蹤問(wèn)題更容易。Vue 的單文件組件使得為組件撰寫隔離的單元測(cè)試這件事更加直接。它會(huì)讓你更有信心地開發(fā)新特性而不破壞現(xiàn)有的實(shí)現(xiàn)，并幫助其他開發(fā)者理解你的組件的作用。2021-06-06
Vue項(xiàng)目報(bào)錯(cuò):parseComponent問(wèn)題及解決
這篇文章主要介紹了Vue項(xiàng)目報(bào)錯(cuò):parseComponent問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
vue代碼分割的實(shí)現(xiàn)(codesplit)
這篇文章主要介紹了vue代碼分割的實(shí)現(xiàn)(codesplit)，做了代碼分割后，會(huì)將代碼分離到不同的bundle中，然后進(jìn)行按需加載這些文件，需要的朋友可以參考下2018-11-11
vue項(xiàng)目根據(jù)不同環(huán)境進(jìn)行設(shè)置打包命令的方法
這篇文章主要介紹了vue項(xiàng)目根據(jù)不同環(huán)境進(jìn)行設(shè)置打包命令,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-11-11
vue中axios防止多次觸發(fā)終止多次請(qǐng)求的示例代碼（防抖）
這篇文章主要介紹了vue中axios防止多次觸發(fā)終止多次請(qǐng)求的實(shí)現(xiàn)方法（防抖）,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-02-02
下面小編就為大家分享一篇Vue 攔截器對(duì)token過(guò)期處理方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
混入(mixin)提供了一種非常靈活的方式，來(lái)分發(fā)vue組件中的可復(fù)用功能。一個(gè)混入對(duì)象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對(duì)象時(shí)，所有混入對(duì)象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)2022-08-08
利用Vue實(shí)現(xiàn)移動(dòng)端圖片輪播組件的方法實(shí)例
輪播圖是前端很常用的一個(gè)網(wǎng)頁(yè)特效，幾乎所有的網(wǎng)站或多或少都會(huì)用到這個(gè)特效。下面這篇文章主要給大家介紹了關(guān)于利用Vue實(shí)現(xiàn)移動(dòng)端圖片輪播組件的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。2017-08-08