這篇文章主要介紹如何使用vue實(shí)現(xiàn)element表格里表頭信息提示功能,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
創(chuàng)新互聯(lián)成立于2013年,是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司,擁有項(xiàng)目成都做網(wǎng)站、成都網(wǎng)站建設(shè)網(wǎng)站策劃,項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命,1280元渾源做網(wǎng)站,已為上家服務(wù),為渾源各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792如圖:在element表格操作一欄需要添加提示功能
實(shí)現(xiàn)效果
如圖:鼠標(biāo)浮上去彈出tips
解決方案
1、編寫組件
在 promptMessage.vue 文件里面實(shí)現(xiàn)
<template> <!-- 處理element表格表頭文字提示特別添加全局注冊組件 --> <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>
以上是“如何使用vue實(shí)現(xiàn)element表格里表頭信息提示功能”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
文章題目:如何使用vue實(shí)現(xiàn)element表格里表頭信息提示功能-創(chuàng)新互聯(lián)
當(dāng)前鏈接:http://muchs.cn/article34/hedpe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App開發(fā)、網(wǎng)站設(shè)計(jì)公司、企業(yè)建站、響應(yīng)式網(wǎng)站、虛擬主機(jī)、服務(wù)器托管
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容