您好,登錄后才能下訂單哦!
這篇文章主要介紹如何使用vue實(shí)現(xiàn)element表格里表頭信息提示功能,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
如圖:在element表格操作一欄需要添加提示功能
實(shí)現(xiàn)效果
如圖:鼠標(biāo)浮上去彈出tips
解決方案
1、編寫(xiě)組件
在 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、開(kāi)發(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>
以上是“如何使用vue實(shí)現(xiàn)element表格里表頭信息提示功能”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。