vue实现element表格里表头信息提示功能(推荐)


Posted in Javascript onNovember 20, 2019

如图:在element表格操作一栏需要添加提示功能

vue实现element表格里表头信息提示功能(推荐) 

实现效果

如图:鼠标浮上去弹出tips

vue实现element表格里表头信息提示功能(推荐) 

解决方案

1、编写组件

在 promptMessage.vue 文件里面实现

<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、开发插件

在 index.js 文件里面实现

import promptMessage from './promptMessage.vue'
export default {
 install: (Vue) => {
 Vue.component('promptMessage', promptMessage)
 }
}

3、使用插件

在 main.js 文件里面实现

import promptMessage from '@/components/promptMessage/index.js'
Vue.use(promptMessage)

4、业务代码实现

<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实现element表格里表头信息提示功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
复制小说文本时出现的随机乱码的去除方法
Sep 07 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
Jun 03 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
Aug 19 Javascript
Node.js批量给图片加水印的方法
Nov 15 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
Aug 24 Javascript
使用angularjs.foreach时return的问题解决
Sep 30 Javascript
详解如何制作并发布一个vue的组件的npm包
Nov 10 Javascript
ng-zorro-antd 入门初体验
Dec 03 Javascript
微信小程序登录数据解密及状态维持实例详解
May 06 Javascript
el-select 下拉框多选实现全选的实现
Aug 02 Javascript
vue3中provide && inject的使用
Jul 01 Vue.js
微信小程序实现时间进度条功能
Nov 17 #Javascript
小程序实现投票进度条
Nov 20 #Javascript
javascript跳转与返回和刷新页面的实例代码
Nov 20 #Javascript
vant IndexBar实现的城市列表的示例代码
Nov 20 #Javascript
Vue中rem与postcss-pxtorem的应用详解
Nov 20 #Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
Nov 20 #Javascript
vue3.0中使用postcss-pxtorem的具体方法
Nov 20 #Javascript
You might like
php实现搜索类封装示例
2016/03/31 PHP
php使用CutyCapt实现网页截图保存的方法
2016/10/03 PHP
magento后台无法登录解决办法的两种方法
2016/12/09 PHP
php实现socket推送技术的示例
2017/12/20 PHP
tp5框架基于ajax实现异步删除图片的方法示例
2020/02/10 PHP
读jQuery之十 事件模块概述
2011/06/27 Javascript
JavaScript显示当前文档最后修改日期的方法
2015/03/19 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
2015/12/01 Javascript
jquery动态切换背景图片的简单实现方法
2016/05/14 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
2017/01/04 Javascript
vue2.0中click点击当前li实现动态切换class
2017/06/21 Javascript
Vue keep-alive实践总结(推荐)
2017/08/31 Javascript
vue.js项目打包上线的图文教程
2017/11/16 Javascript
three.js中文文档学习之如何本地运行详解
2017/11/20 Javascript
详解vue文件中使用echarts.js的两种方式
2018/10/18 Javascript
轻松解决JavaScript定时器越走越快的问题
2019/05/13 Javascript
p5.js实现故宫橘猫赏秋图动画
2019/10/23 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
2020/08/04 Javascript
详解python 字符串和日期之间转换 StringAndDate
2017/05/04 Python
python使用jieba实现中文分词去停用词方法示例
2018/03/11 Python
Pycharm无法显示动态图片的解决方法
2018/10/28 Python
Pyqt5如何让QMessageBox按钮显示中文示例代码
2019/04/11 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
详解python命令提示符窗口下如何运行python脚本
2020/09/11 Python
HTML5文档结构标签
2017/04/21 HTML / CSS
美国彩妆品牌:Coastal Scents
2017/04/01 全球购物
Swisse官方海外旗舰店:澳大利亚销量领先,自然健康品牌
2017/12/15 全球购物
专业求职信撰写要诀
2014/02/18 职场文书
数控专业毕业生自荐信范文
2014/03/04 职场文书
排查整治工作方案
2014/06/09 职场文书
公司户外活动总结
2014/07/04 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
教师见习报告范文
2014/11/03 职场文书
本溪水洞导游词
2015/02/11 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书
JavaScript实现登录窗体
2021/06/22 Javascript